CINXE.COM
NJ Web Design System (v2.2.0) | NJ Web Design System (v2.2.0)
<!DOCTYPE html> <html lang="en-US" dir="ltr" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> window.frctl = { env: 'static' }; </script> <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script> <link rel="shortcut icon" href="./themes/mandelbrot/favicon.ico" type="image/ico"> <style> :root { } </style> <link rel="stylesheet" href="./themes/mandelbrot/css/white.css?cachebust=1.10.1" type="text/css"> <link rel="stylesheet" href="./themes/mandelbrot/css/highlight.css?cachebust=1.10.1" type="text/css"> <title>NJ Web Design System (v2.2.0) | NJ Web Design System (v2.2.0)</title> </head> <body> <div class="Frame" id="frame"> <div class="Frame-header"> <div class="Header"> <button class="Header-button Header-navToggle" data-action="toggle-sidebar"> <div class="Header-navToggleIcon Header-navToggleIcon--open"> <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/> </svg> </div> <div class="Header-navToggleIcon Header-navToggleIcon--closed"> <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </svg> </div> </button> <a href="./index.html" class="Header-title" data-pjax>NJ Web Design System (v2.2.0)</a> </div> </div> <div class="Frame-body" data-role="body"> <div class="Frame-panel Frame-panel--main" data-role="main"> <div class="Frame-inner" id="pjax-container"> <div class="Document"> <div class="Document-header"> <h1 class="Document-title">NJ Web Design System (v2.2.0)</h1> </div> <div class="Document-content"> <div class="Prose"> <p>You can browse the component library using the navigation on the left.</p> <h3>Component statuses</h3> <p>Components and their variants have been given statuses reflecting their state of completion. The available statuses are listed below.</p> <table> <tr> <th>Label</th> <th>Description</th> </tr> <tr> <td> <div class="Status Status--tag"> <label class="Status-label" style="background-color: #FF3333; border-color: #FF3333;">Prototype</label> </div> </td> <td>Do not implement.</td> </tr> <tr> <td> <div class="Status Status--tag"> <label class="Status-label" style="background-color: #FF9233; border-color: #FF9233;">WIP</label> </div> </td> <td>Work in progress. Implement with caution.</td> </tr> <tr> <td> <div class="Status Status--tag"> <label class="Status-label" style="background-color: #29CC29; border-color: #29CC29;">Ready</label> </div> </td> <td>Ready to implement.</td> </tr> </table> </div> </div> </div> </div> </div> <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar"> <nav class="Navigation" data-behaviour="navigation"> <div class="Navigation-panel Navigation-panel--main" data-role="main-panel"> <div class="Navigation-group Navigation-search"> <form action="" class="Search" data-behaviour="search"> <label class="Search-label" for="search-input">Search</label> <input class="Search-input" id="search-input" type="search" placeholder="Search…" data-role="input" autocomplete="off"> <button type="button" data-behaviour="clear-search" class="Search-clearButton" aria-label="Clear search" hidden> <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/> </svg> </button> </form> </div> <div class="Navigation-group"> <div class="Tree" data-behaviour="tree" id="tree-components"> <div class="Tree-header"> <h3 class="Tree-title">components</h3> <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden> <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg> </button> </div> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-type"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-type-items"> Typography </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-type-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/fonts.html" data-role="tree-link" data-pjax data-test="fonts" data-handle="fonts" > <span>Fonts</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/links.html" data-role="tree-link" data-pjax data-test="links" data-handle="links" > <span>Links</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/lists.html" data-role="tree-link" data-pjax data-test="lists" data-handle="lists" > <span>Lists</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/type-spacing.html" data-role="tree-link" data-pjax data-test="type-spacing" data-handle="type-spacing" > <span>Type Spacing</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/typesetting.html" data-role="tree-link" data-pjax data-test="typesetting" data-handle="typesetting" > <span>Typesetting</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-buttons"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-buttons-items"> Buttons </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-buttons-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--primary-(light).html" data-role="tree-link" data-pjax data-test="buttons--primary-(light)" data-handle="buttons--primary-(light)" > <span>Primary Light</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--primary-(dark).html" data-role="tree-link" data-pjax data-test="buttons--primary-(dark)" data-handle="buttons--primary-(dark)" > <span>Primary Dark</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--primary-(danger).html" data-role="tree-link" data-pjax data-test="buttons--primary-(danger)" data-handle="buttons--primary-(danger)" > <span>Primary Danger</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--secondary-(light).html" data-role="tree-link" data-pjax data-test="buttons--secondary-(light)" data-handle="buttons--secondary-(light)" > <span>Secondary Light</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--secondary-(dark).html" data-role="tree-link" data-pjax data-test="buttons--secondary-(dark)" data-handle="buttons--secondary-(dark)" > <span>Secondary Dark</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--secondary-(danger).html" data-role="tree-link" data-pjax data-test="buttons--secondary-(danger)" data-handle="buttons--secondary-(danger)" > <span>Secondary Danger</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--tertiary-(light).html" data-role="tree-link" data-pjax data-test="buttons--tertiary-(light)" data-handle="buttons--tertiary-(light)" > <span>Tertiary Light</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--tertiary-(dark).html" data-role="tree-link" data-pjax data-test="buttons--tertiary-(dark)" data-handle="buttons--tertiary-(dark)" > <span>Tertiary Dark</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/buttons--tertiary-(danger).html" data-role="tree-link" data-pjax data-test="buttons--tertiary-(danger)" data-handle="buttons--tertiary-(danger)" > <span>Tertiary Danger</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-labels"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-labels-items"> Tags </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-labels-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/labels--default.html" data-role="tree-link" data-pjax data-test="labels--default" data-handle="labels--default" > <span>Info</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/labels--big.html" data-role="tree-link" data-pjax data-test="labels--big" data-handle="labels--big" > <span>Big</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/tables.html" data-role="tree-link" data-pjax data-test="tables" data-handle="tables" > <span>Tables</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-alerts"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-alerts-items"> Alerts </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-alerts-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--default.html" data-role="tree-link" data-pjax data-test="alerts--default" data-handle="alerts--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--info.html" data-role="tree-link" data-pjax data-test="alerts--info" data-handle="alerts--info" > <span>Info</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--success.html" data-role="tree-link" data-pjax data-test="alerts--success" data-handle="alerts--success" > <span>Success</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--warning.html" data-role="tree-link" data-pjax data-test="alerts--warning" data-handle="alerts--warning" > <span>Warning</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--error.html" data-role="tree-link" data-pjax data-test="alerts--error" data-handle="alerts--error" > <span>Error</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--no-header.html" data-role="tree-link" data-pjax data-test="alerts--no-header" data-handle="alerts--no-header" > <span>No header</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--no-icon.html" data-role="tree-link" data-pjax data-test="alerts--no-icon" data-handle="alerts--no-icon" > <span>No icon</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alerts--slim.html" data-role="tree-link" data-pjax data-test="alerts--slim" data-handle="alerts--slim" > <span>Slim</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-accordion"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-accordion-items"> Accordion </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-accordion-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/accordion--default.html" data-role="tree-link" data-pjax data-test="accordion--default" data-handle="accordion--default" > <span>Borderless</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/accordion--bordered.html" data-role="tree-link" data-pjax data-test="accordion--bordered" data-handle="accordion--bordered" > <span>Bordered</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/accordion--multiselectable.html" data-role="tree-link" data-pjax data-test="accordion--multiselectable" data-handle="accordion--multiselectable" > <span>Multiselectable</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-form"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-form-items"> Forms </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-form-items"> <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-components-collection-controls"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-controls-items"> Controls </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-controls-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/character-count.html" data-role="tree-link" data-pjax data-test="character-count" data-handle="character-count" > <span>Character Count</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/checkboxes.html" data-role="tree-link" data-pjax data-test="checkboxes" data-handle="checkboxes" > <span>Checkboxes</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-collection Tree-depth-4" data-behaviour="collection" id="tree-components-collection-combo-box"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-combo-box-items"> Combo Box </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-combo-box-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/combo-box--default.html" data-role="tree-link" data-pjax data-test="combo-box--default" data-handle="combo-box--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/combo-box--default-value.html" data-role="tree-link" data-pjax data-test="combo-box--default-value" data-handle="combo-box--default-value" > <span>Default Value</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/combo-box--disabled.html" data-role="tree-link" data-pjax data-test="combo-box--disabled" data-handle="combo-box--disabled" > <span>Disabled</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/combo-box--placeholder.html" data-role="tree-link" data-pjax data-test="combo-box--placeholder" data-handle="combo-box--placeholder" > <span>Placeholder</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/combo-box--required.html" data-role="tree-link" data-pjax data-test="combo-box--required" data-handle="combo-box--required" > <span>Required</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/combo-box--test.html" data-role="tree-link" data-pjax data-test="combo-box--test" data-handle="combo-box--test" > <span>Test</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-input.html" data-role="tree-link" data-pjax data-test="date-input" data-handle="date-input" > <span>Date Input</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-collection Tree-depth-4" data-behaviour="collection" id="tree-components-collection-date-picker"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-date-picker-items"> Date Picker </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-date-picker-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-picker--default.html" data-role="tree-link" data-pjax data-test="date-picker--default" data-handle="date-picker--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-picker--default-date.html" data-role="tree-link" data-pjax data-test="date-picker--default-date" data-handle="date-picker--default-date" > <span>Default Date</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-picker--default-value.html" data-role="tree-link" data-pjax data-test="date-picker--default-value" data-handle="date-picker--default-value" > <span>Default Value</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-picker--disabled.html" data-role="tree-link" data-pjax data-test="date-picker--disabled" data-handle="date-picker--disabled" > <span>Disabled</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-picker--restricted-date.html" data-role="tree-link" data-pjax data-test="date-picker--restricted-date" data-handle="date-picker--restricted-date" > <span>Restricted Date</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-picker--range-date.html" data-role="tree-link" data-pjax data-test="date-picker--range-date" data-handle="date-picker--range-date" > <span>Range Date</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/date-range-picker.html" data-role="tree-link" data-pjax data-test="date-range-picker" data-handle="date-range-picker" > <span>Date Range Picker</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/dropdown.html" data-role="tree-link" data-pjax data-test="dropdown" data-handle="dropdown" > <span>Dropdown</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/error-states.html" data-role="tree-link" data-pjax data-test="error-states" data-handle="error-states" > <span>Error states</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/file.html" data-role="tree-link" data-pjax data-test="file" data-handle="file" > <span>File</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/file-input.html" data-role="tree-link" data-pjax data-test="file-input" data-handle="file-input" > <span>File input</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-collection Tree-depth-4" data-behaviour="collection" id="tree-components-collection-radio-buttons"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-radio-buttons-items"> Radio Buttons </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-radio-buttons-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/radio-buttons--default.html" data-role="tree-link" data-pjax data-test="radio-buttons--default" data-handle="radio-buttons--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/radio-buttons--tile.html" data-role="tree-link" data-pjax data-test="radio-buttons--tile" data-handle="radio-buttons--tile" > <span>Tile</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/range-input.html" data-role="tree-link" data-pjax data-test="range-input" data-handle="range-input" > <span>Range Input</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/text-input.html" data-role="tree-link" data-pjax data-test="text-input" data-handle="text-input" > <span>Text Input</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/time-picker.html" data-role="tree-link" data-pjax data-test="time-picker" data-handle="time-picker" > <span>Time Picker</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/validation.html" data-role="tree-link" data-pjax data-test="validation" data-handle="validation" > <span>Validation</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-components-collection-templates"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-templates-items"> Templates </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-templates-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/address-form.html" data-role="tree-link" data-pjax data-test="address-form" data-handle="address-form" > <span>Address Form</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/name-form.html" data-role="tree-link" data-pjax data-test="name-form" data-handle="name-form" > <span>Name Form</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/password-reset-form.html" data-role="tree-link" data-pjax data-test="password-reset-form" data-handle="password-reset-form" > <span>Password Reset Form</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/sign-in-form.html" data-role="tree-link" data-pjax data-test="sign-in-form" data-handle="sign-in-form" > <span>Sign In Form</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-navigation"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-navigation-items"> Navigation </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-navigation-items"> <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-components-collection-sidenav"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-sidenav-items"> Side navigation </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-sidenav-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/sidenav--default.html" data-role="tree-link" data-pjax data-test="sidenav--default" data-handle="sidenav--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/sidenav--compare.html" data-role="tree-link" data-pjax data-test="sidenav--compare" data-handle="sidenav--compare" > <span>Compare</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-header"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-header-items"> Headers </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-header-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/header--default.html" data-role="tree-link" data-pjax data-test="header--default" data-handle="header--default" > <span>Compare</span> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/header--basic.html" data-role="tree-link" data-pjax data-test="header--basic" data-handle="header--basic" > <span>Basic header</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/header--basic-mega.html" data-role="tree-link" data-pjax data-test="header--basic-mega" data-handle="header--basic-mega" > <span>Basic with mega-menu</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/header--extended.html" data-role="tree-link" data-pjax data-test="header--extended" data-handle="header--extended" > <span>Extended header</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/header--extended-mega.html" data-role="tree-link" data-pjax data-test="header--extended-mega" data-handle="header--extended-mega" > <span>Extended with mega-menu</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-footer"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-footer-items"> Footer </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-footer-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/footer--default.html" data-role="tree-link" data-pjax data-test="footer--default" data-handle="footer--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/footer--big.html" data-role="tree-link" data-pjax data-test="footer--big" data-handle="footer--big" > <span>Big</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/footer--slim.html" data-role="tree-link" data-pjax data-test="footer--slim" data-handle="footer--slim" > <span>Slim</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-button-groups"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-button-groups-items"> Button groups </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-button-groups-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/button-groups--default.html" data-role="tree-link" data-pjax data-test="button-groups--default" data-handle="button-groups--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/button-groups--segmented.html" data-role="tree-link" data-pjax data-test="button-groups--segmented" data-handle="button-groups--segmented" > <span>Segmented</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-tooltip"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-tooltip-items"> Tooltip </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-tooltip-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/tooltip--default.html" data-role="tree-link" data-pjax data-test="tooltip--default" data-handle="tooltip--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/tooltip--utilities.html" data-role="tree-link" data-pjax data-test="tooltip--utilities" data-handle="tooltip--utilities" > <span>With utilities</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/banner.html" data-role="tree-link" data-pjax data-test="banner" data-handle="banner" > <span>Banner</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-breadcrumb"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-breadcrumb-items"> Breadcrumb </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-breadcrumb-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/breadcrumb--default.html" data-role="tree-link" data-pjax data-test="breadcrumb--default" data-handle="breadcrumb--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/breadcrumb--wrap.html" data-role="tree-link" data-pjax data-test="breadcrumb--wrap" data-handle="breadcrumb--wrap" > <span>Wrap</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-card"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-card-items"> Card </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-card-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/card--compare.html" data-role="tree-link" data-pjax data-test="card--compare" data-handle="card--compare" > <span>Compare</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/card--default.html" data-role="tree-link" data-pjax data-test="card--default" data-handle="card--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/card--media.html" data-role="tree-link" data-pjax data-test="card--media" data-handle="card--media" > <span>Media</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/card--flag.html" data-role="tree-link" data-pjax data-test="card--flag" data-handle="card--flag" > <span>Flag</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/card--test.html" data-role="tree-link" data-pjax data-test="card--test" data-handle="card--test" > <span>Test</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/graphic-list.html" data-role="tree-link" data-pjax data-test="graphic-list" data-handle="graphic-list" > <span>Graphic list</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/hero.html" data-role="tree-link" data-pjax data-test="hero" data-handle="hero" > <span>Hero</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/icon.html" data-role="tree-link" data-pjax data-test="icon" data-handle="icon" > <span>Icon</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-identifier"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-identifier-items"> Identifier </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-identifier-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--default.html" data-role="tree-link" data-pjax data-test="identifier--default" data-handle="identifier--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--lang-es.html" data-role="tree-link" data-pjax data-test="identifier--lang-es" data-handle="identifier--lang-es" > <span>Spanish</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--no-logos.html" data-role="tree-link" data-pjax data-test="identifier--no-logos" data-handle="identifier--no-logos" > <span>No Logos</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--no-logos-lang-es.html" data-role="tree-link" data-pjax data-test="identifier--no-logos-lang-es" data-handle="identifier--no-logos-lang-es" > <span>No Logos (Spanish)</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--multiple-logos.html" data-role="tree-link" data-pjax data-test="identifier--multiple-logos" data-handle="identifier--multiple-logos" > <span>Multiple Logos</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--multiple-logos-lang-es.html" data-role="tree-link" data-pjax data-test="identifier--multiple-logos-lang-es" data-handle="identifier--multiple-logos-lang-es" > <span>Multiple Logos (Spanish)</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--taxpayer-disclaimer.html" data-role="tree-link" data-pjax data-test="identifier--taxpayer-disclaimer" data-handle="identifier--taxpayer-disclaimer" > <span>Taxpayer disclaimer</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/identifier--taxpayer-disclaimer-lang-es.html" data-role="tree-link" data-pjax data-test="identifier--taxpayer-disclaimer-lang-es" data-handle="identifier--taxpayer-disclaimer-lang-es" > <span>Taxpayer disclaimer (Spanish)</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-layouts"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-layouts-items"> Page layouts </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-layouts-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/layout--docs.html" data-role="tree-link" data-pjax data-test="layout--docs" data-handle="layout--docs" > <span>Documentation</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/layout--landing.html" data-role="tree-link" data-pjax data-test="layout--landing" data-handle="layout--landing" > <span>Landing</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-search"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-search-items"> Search </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-search-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/search--default.html" data-role="tree-link" data-pjax data-test="search--default" data-handle="search--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/search--header.html" data-role="tree-link" data-pjax data-test="search--header" data-handle="search--header" > <span>Header</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-step-indicator"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-step-indicator-items"> Step indicator </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-step-indicator-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--default.html" data-role="tree-link" data-pjax data-test="step-indicator--default" data-handle="step-indicator--default" > <span>Default</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--short.html" data-role="tree-link" data-pjax data-test="step-indicator--short" data-handle="step-indicator--short" > <span>Short</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--centered.html" data-role="tree-link" data-pjax data-test="step-indicator--centered" data-handle="step-indicator--centered" > <span>Centered</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--counters.html" data-role="tree-link" data-pjax data-test="step-indicator--counters" data-handle="step-indicator--counters" > <span>Counters</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--counters-sm.html" data-role="tree-link" data-pjax data-test="step-indicator--counters-sm" data-handle="step-indicator--counters-sm" > <span>Counters Sm</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--centered-counters.html" data-role="tree-link" data-pjax data-test="step-indicator--centered-counters" data-handle="step-indicator--centered-counters" > <span>Centered Counters</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--centered-counters-sm.html" data-role="tree-link" data-pjax data-test="step-indicator--centered-counters-sm" data-handle="step-indicator--centered-counters-sm" > <span>Centered Counters Sm</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--no-labels.html" data-role="tree-link" data-pjax data-test="step-indicator--no-labels" data-handle="step-indicator--no-labels" > <span>No Labels</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/step-indicator--centered-no-labels.html" data-role="tree-link" data-pjax data-test="step-indicator--centered-no-labels" data-handle="step-indicator--centered-no-labels" > <span>Centered No Labels</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-test"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-test-items"> Test </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-test-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/alert-lists.html" data-role="tree-link" data-pjax data-test="alert-lists" data-handle="alert-lists" > <span>Alert Lists</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/flex.html" data-role="tree-link" data-pjax data-test="flex" data-handle="flex" > <span>Flex</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/kitchen-sink.html" data-role="tree-link" data-pjax data-test="kitchen-sink" data-handle="kitchen-sink" > <span>Kitchen sink</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/multi-column-checkboxes.html" data-role="tree-link" data-pjax data-test="multi-column-checkboxes" data-handle="multi-column-checkboxes" > <span>Multi Column Checkboxes</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-utilities"> <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-components-collection-utilities-items"> Utilities </button> <ul class="Tree-collectionItems" data-role="items" id="tree-components-collection-utilities-items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/aspect.html" data-role="tree-link" data-pjax data-test="aspect" data-handle="aspect" > <span>Aspect Ratio</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="./components/detail/embed-container.html" data-role="tree-link" data-pjax data-test="embed-container" data-handle="embed-container" > <span>Responsive embed container</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> </ul> </div> </div> <div class="Navigation-group"> <div class="Tree"> <div class="Tree-header"> <h3 class="Tree-title"> Information </h3> </div> <dl class="Tree-aside"> <div> <dt class="Tree-asideTerm">Built on:</dt> <dd class="Tree-asideDescription"> <time datetime="2025-03-07T20:34:23.410Z"> 3/7/2025 </time> </dd> </div> </dl> </div> </div> </div> </nav> </div> </div> </div> <script src="./themes/mandelbrot/js/mandelbrot.js?cachebust=1.10.1"></script> </body> </html>