The step list is a numbered list. It has:
- A number for each item in the list, enclosed in a circle
- Lines connecting all the circled numbers
- A title for each step
- Detail for each step
- You can use hyperlinks in the detail space
- You cannot use bullet points in the detail space
State processes can be complicated and opaque. The step list shows all the steps in a process. The step list makes these processes visible, even when some steps do not require people to act.
Use the step list when you need more than one sentence to explain the steps in a process.
Introduce the step list with a heading so people know what process the step list describes. You can add a paragraph block between the heading and the step list, but this is optional. Keep this paragraph concise.
The step list emphasizes important processes. Use it sparingly on your website. If you have a process where most steps can be explained in one sentence, use a regular numbered list instead.
Do not use the step list to create a list of items that are not ordered. Use bullet points instead.
<ol class="cagov-step-list">
<li>
<strong>Complete local permitting processes</strong>
<br />
<span class="has-inline-color cagov-step-list-content">
Many cities and counties have rules and permitting for cannabis
businesses. Some do not allow cannabis businesses. Make sure you set up
your business in an area that allows commercial cannabis activity.
Complete any permitting requirements your city or county requires before
you apply for a state cannabis license.
</span>
</li>
<li>
<strong>Understand the state regulations for cannabis businesses</strong>
<br />
<span class="has-inline-color cagov-step-list-content">
The Department of Cannabis Control (DCC) has requirements
for standard operating procedures, training employees and how facilities
must be set up. Make sure you understand and can meet these rules.
</span>
</li>
<li>
<strong>Gather your application information and documents</strong>
<br />
<span class="has-inline-color cagov-step-list-content">
DCC has resources to help you create the documents you need during the
license process. If you have questions about the requirements, email the
<a href="mailto:licensing@cannabis.ca.gov">DCC licensing team</a>.
</span>
</li>
</ol>| Property | Value |
|---|---|
| Machine name | ds-step-list |
| JavaScript | no |
| SCSS | ./src/index.scss |
The instructions assume familiarity with npm package management tool and Sass.
- Include SCSS in your compiler.
- Add the sample markup from the component to your HTML.
- Adjust text as needed.
We recommend using a build system and bundling your CSS for faster performance. If you do not use a build system, you can include the code from our CDN with a link tag.
<link rel="stylesheet" href="https://cdn.designsystem.webstandards.ca.gov/components/ds-step-list/v3.0.1/dist/index.css">The following CSS variables are used in this component:
--accent2-300--font-size-5--font-size-2--font-weight-7--font-weight-5--font-lineheight-3--s-2
All CSS variables define their own fallback value so you do not have to use additional CSS unless you want to change them. You may define your own value for the variable by adding your own style rules. Here is an example defining the global hex value for a CSS variable named “--primary-700”:
:root {
--primary-700: #165ac2;
}As a component in Alpha status, this component must pass the following accessibility reviews every time a new version is published:
- Tested with the axe accessibility tool and passes all automated WCAG Level AA checks
- Reviewed with the VoiceOver screen reader on desktop
- Verified keyboard navigation and that all actionable elements of the component are reachable via keyboard commands only
- Reviewed component layout on a variety of screen sizes
This is an HTML- and CSS-only component. JavaScript is not required. It uses CSS variables to inherit design token values. Token definitions are not required because these style rules provide fallback values.
This component uses the ol.cagov-step-list class. It will work on ul elements, but would not be semantically correct. Use ol with this component.