Settings
Starting colors
The colors every other one is worked out from.
Action colors
The colors of buttons and links as they are pressed.
A column of settings beside what they change: a choice at the top, groups that open and close, and a footer to count and reset changes.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.
Examples
Usage
Which theme the settings change, then two groups of them, the first open, and a footer that counts the changes and resets them.
Three groups
Three groups of a page's settings, the first open. Nothing has changed yet, so the reset button is off.
Page settings
Layout
Header
Search engines
Built from
Guidelines
Purpose
Holds the settings of what sits beside it, such as a theme, a page or a chart: which version the settings change, the settings in groups that open and close, and a footer that says how many have changed and resets them.
When to use
- In a column beside a canvas, a preview or a page, where each change shows at once.
When not to use
- For a long form a reader fills in once. Use a page of fields with one button to send them.
- For two or three settings. Use a popover from the thing they change.
Usage rules
Do
- Open the group a reader needs first.
- Say in each group's first line what its settings change.
Don't
- Put a button to save in the footer: every change already shows.
- Nest a group inside another.
Anatomy
- The panel, the Card component in its outline surface and panel layout: the header on a band, the body padded, the divider over the footer.
- The header: the panel's title in the small header size, and a menu button at its end.
- The choice, the Segmented control component at its small size: which version the settings below change, such as light or dark.
- The groups, the Accordion component, flat and small: each a title that opens and closes, and inside it a line saying what the group is for and its settings. The line after the last group is hidden, since the panel's divider already runs there.
- Each setting, the Field component side by side, its label beside a small Input.
- The footer, the card's link and actions kind: a link to the changes, and a quiet button that resets them.
Behavior
Each group opens and closes on its own. Settings change what they set as they are edited, so the panel has no button to send them; the footer counts what changed and resets it. With nothing changed, the reset button is off.
Accessibility
What it does for you
- The choice is a radio group, moved through with the arrow keys.
- Each group's title is a button that says whether it is open.
- Every setting keeps its label; a required one says so.
What you must do
- Name the panel by its title, and make its title a heading at the level the page needs.
- Name the choice for what it chooses, such as "Theme to edit".
- Name the menu button for what it holds, such as "More settings".
How to test
- Tab to the choice and move it with the arrow keys; Tab to a group's title and open or close it with Enter or Space.
- With a screen reader, the choice is read by its name, each group's title as a button that says whether it is open, and each setting by its label, a required one as required.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus through the choice, each group's title, the settings of the open groups and the footer. |
| Down ArroworRight Arrow | In the choice, moves the choice to the next item. |
| Up ArroworLeft Arrow | In the choice, moves the choice to the previous item. |
| EnterorSpace | On a group's title, opens the group, or closes it when it is open. |
Source
The settings panel's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.
Stylesheet
/* site-settings-panel — Settings panel, a block: a column of settings beside what they change, its choice at the
* top, its groups that open and close, and a footer that counts the changes and resets them. Copy it into your
* project and rename site- to your project's own prefix. The frame is the Card component, outline surface, in its
* panel layout; the segmented control, accordion, fields and inputs are the system's own. The block draws only the
* room inside a group, and hides the line after the last group, where the panel's own divider already runs. */
.site-settings-panel__group {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-md);
}
.site-settings-panel__hint {
margin: 0;
}
/* The flat accordion ends every group with a divider; the last one would double the line over the footer. */
.site-settings-panel__groups > :last-child:not(details) {
display: none;
}