Rows of the same kind, one thing each: plain, bulleted or numbered text, or rows with an icon, a title and a quiet line that go somewhere, do something or can be chosen.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
typesmbk-list--type-<value> | plainbulletednumberednavigationactionselectable | plain | Plain, bulleted and numbered lists are text. Navigation rows are links, action rows are buttons or hold one, and selectable rows are options a reader chooses. |
sizesmbk-list--size-<value> | smmd | sm | The rows of navigation, action and selectable lists: sm rows are at least 40 tall, md rows 48, with more room above and below. Text lists have one size. |
dividerssmbk-list--dividers | On or off | Off | A line between rows, for rows that are actions or choices. Text lists are grouped by their spacing and rarely need one. |
ticklesssmbk-list--tickless | On or off | Off | A selectable list whose chosen row shows by its fill and a bolder title, with no tick: for a list where choosing a row opens it, such as an inbox beside its reading pane, where a tick would read as chosen for later. The keyboard and what a screen reader hears stay the same. |
Examples
Usage
A navigation list: each row is a link, and the current one sits on the surface with a rim and a bolder title.
Bulleted
Text rows with a bullet, for a checklist whose order does not matter.
Before you publish
- Every page has a title and a description
- Every picture has words for screen readers
- The contact form sends to the right address
Numbered
Text rows with a number, for steps in order. A line that wraps keeps under the text, not the number.
Set up your site
- Choose a name and the address people will type to reach it
- Pick a theme
- Write your first page
Plain
Text rows with nothing in front, spaced a line apart.
Included in every plan
- Unlimited pages
- Your own address
- A copy of everything, every night
Action
Each row is a button with a title and a quiet line under it.
Recent reports
Selectable
Options to choose from: the arrow keys move, Space or Enter chooses, and the chosen row takes the selected fill and a tick.
Where your data is kept
- United States
- European Union
- Asia Pacific
Guidelines
Purpose
Rows of the same kind, one thing each: a checklist, steps to follow, a feed, a settings menu, a set of choices. Plain, bulleted and numbered lists are text. Navigation, action and selectable lists are rows with an icon, a title and a quiet line under it, and each row goes somewhere, does something or can be chosen. For the facts about one thing, a name beside each value, use the description list; for data with columns, the table.
When to use
- A checklist or a set of points whose order does not matter: bulleted.
- Steps to follow in order: numbered.
- A short menu of pages or settings, with the current one marked: navigation.
- A feed or a list of recent things, each opened by pressing it, or each with a button of its own: action.
- A short set of choices shown all at once, one or several chosen: selectable.
When not to use
- Names with their values, such as an account's details. Use the description list.
- Data with several columns to compare or sort. Use the table.
- A choice in a form with a few short options. Use radios or checkboxes in a field group.
- A long set of choices that would push the page down. Use the select.
- The site's main navigation. Use the header, the app bar or the sidebar.
Usage rules
Do
- Number rows only when their order matters.
- Open a row in a new tab only when it leads to another site and the reader would want to come back to the list.
- Keep a row's title short and put the detail in its quiet line.
- Use dividers between rows that are pressed or chosen, where the rows touch.
- Make a selectable list tickless when choosing a row opens it, such as an inbox beside its reading pane, so the open row does not read as kept for later.
Don't
- Put a button inside a row that is a link or a button.
- Rule off every row of a text list: its spacing already groups it.
- Use a list for names with their values.
Reset your password
- Open the email we sent
- Choose a new password
- Sign in again
Number the rows only when their order matters, such as steps to follow.
Our offices
- Lisbon
- Berlin
- Toronto
Numbers on rows with no order make the reader look for one.
Packing list
- A charger
- A notebook
- Water
Let spacing group the rows of a text list.
Packing list, divided
- A charger
- A notebook
- Water
A line under every row of text is noise; keep dividers for rows that are pressed or chosen.
Anatomy
- The block, around everything: a nav for a navigation list, a div otherwise.
- The title part, which names the list. Optional, but a navigation or selectable list without one needs an accessible name of its own; the wrapper warns in development when it has none.
- The items part, the list itself: a ul, or an ol for a numbered list; a listbox for a selectable list.
- The item part, one li per row.
- In a text list, the marker part (a bullet, or a number the stylesheet counts when the marker is left empty) and the text part. A plain row holds its words with no marker.
- In the other lists, the row part inside each item: a link, a button, or a plain box whose end holds a button. Inside the row, in order: the start part (such as an avatar), the leading part (an icon), the body part holding the item title part and the quiet meta part, the trailing part (an icon), the check part (a selectable row's tick) and the end part (such as a badge or a button).
- The divider part, the divider component, ending each row but the last when the list has dividers.
- The empty part, the words shown in place of the rows when there are none.
Behavior
Text rows sit a line of list spacing apart; a row that wraps keeps its lines under the text, not under the marker, and the numbers of a numbered list share one column. Rows that can be pressed touch each other, at least 40 tall at the small size and 48 at the medium size, which adds room above and below. Hovering one fills it lightly and pressing it fills it more. With the React wrapper, in a list whose rows can all be pressed, the light fill is one shape that slides from row to row with the mouse and lights the nearest row when the pointer is on a divider or past the last row, where a click presses that row; it fades in where the pointer enters and out as it leaves, lands without sliding when the reader's system asks for less motion, and steps aside while the keys move. A current or chosen row keeps its own fill over it; a touch screen shows no hover fill, and plain HTML keeps each row's own.
The current row of a navigation list sits on the default surface with a light rim, and its title is one weight bolder. Every title keeps the room of its bolder self, so nothing beside it moves as it turns bold (markup written by hand repeats the title's words in its data-label attribute). A chosen option takes the see-through selected fill, with a tick at its end; the tick is in every option and only shows when it is chosen, so a row never changes width. A tickless selectable list (tickless, the smbk-list--tickless class) draws no tick: its chosen row shows by the fill and a title one weight bolder, for rows that open as they are chosen. A disabled row dims its words and icons.
A link row can open its page in a new tab (target="_blank", with the rel the page wants), for rows that lead to other sites, so the reader keeps their place in the list. Its name then ends with "(opens in a new tab)", heard by a screen reader and not seen; newTabText changes the words. Nothing changes in how it looks: show it with an arrow-out icon after the title (trailingIcon="ArrowSquareOut").
A selectable list holds its own choice, or follows the one the page gives it and reports each change; given a name, it sends the chosen values with its form. Nothing else animates.
Accessibility
What it does for you
- A text list is a real list, so a screen reader says how many rows it has. Its role is written on the element, because some browsers stop calling a list a list once its bullets are gone.
- A list is named by its title. A navigation list is a navigation region named the same way.
- A plain, bulleted or numbered list takes no focus. Links and buttons inside it are Tab stops in reading order.
- A navigation row is a link, and the current one says so to a screen reader.
- An action row is a button, or a box holding one.
- A selectable list is a listbox and its rows are options, each saying whether it is chosen. The list is one Tab stop. A disabled option is skipped.
- A row is named by its title, and its quiet line describes it. A link row that opens a new tab ends its name with "(opens in a new tab)", so the change of tab is never a surprise.
- The marked rows never rely on color alone: the current row's title is bolder, and a chosen option shows a tick, or in a tickless list a bolder title.
- In a forced-color mode, the current row and a chosen option are drawn in the system's highlight colors.
What you must do
- Give each list its own title, or an
aria-label. On a page with several navigation lists, make the titles differ, so the regions can be told apart. - Never put a button or link inside a row that is itself a link or a button. Put it in the end of a row that is not pressed, so each target does one thing.
- Give the new-tab words in the page's own language with
newTabTextwhen the page is not in English. In markup written by hand, give a row that opens a new tab both attributes and end its title with an element of thesmbk-visually-hiddenclass holding a space and "(opens in a new tab)", markeddata-unseen.
How to test
- With the keyboard, Tab through a list of links or buttons: each is one stop, in reading order, with the focus ring showing.
- With a selectable list, Tab reaches it once. The arrow keys move between options, Home and End jump to the ends, typing the first letters of a title moves to it, and Space or Enter chooses.
- With a screen reader, a text list is announced with its number of rows, a navigation list as a navigation region by its title, the current row as current, and a selectable list as a listbox whose options say whether they are chosen.
- With text at 200% and the page 320 pixels wide, a long title wraps under its own text and rows stay whole.
- In a forced-color mode, the current row and a chosen option are still told from the rest.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the next link or button in a row. A selectable list is one stop; a disabled option is skipped. |
| Enter | On a navigation row, follows its link. On an action row, presses its button. |
| Space | On an action row, presses its button. |
| Down ArroworUp Arrow | In a selectable list, moves to the next or previous option. |
| HomeorEnd | In a selectable list, moves to the first or last option. |
| Any character | In a selectable list, moves to the option whose title starts with the letters typed. |
| SpaceorEnter | In a selectable list, chooses the focused option. |
Source
The files the list is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-list — List. Figma "List" 7113:863 (Type × Dividers) and "List item" 7113:173 (State × Size).
* A title over rows of one kind, and the words to show when there are none. Plain, bulleted and numbered
* lists are text, a line of list spacing apart; a bulleted or numbered row puts its marker in front of its
* text, and a line that wraps keeps under the text, not under the marker. Navigation, action and selectable
* lists are rows with an icon, a title and a quiet line, touching: the row is the link, the button or the
* option, and its states are the browser's and the markup's own (hover, pressed, focus, aria-current,
* aria-selected, disabled), never classes. A row's edge is drawn inside its height: its padding gives the
* edge's width back. The dividers are the divider component, ending every row but the last. */
.smbk-list {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-md);
min-width: 0;
}
.smbk-list__title {
margin: 0;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-label-lg-font-family);
font-size: var(--smbk-typography-label-lg-font-size);
font-weight: var(--smbk-typography-label-lg-font-weight);
line-height: var(--smbk-typography-label-lg-line-height);
letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
text-transform: var(--smbk-typography-label-lg-text-transform);
}
.smbk-list__items {
display: flex;
flex-direction: column;
gap: var(--smbk-space-text-list);
margin: 0;
padding: 0;
list-style: none;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-body-md-font-family);
font-size: var(--smbk-typography-body-md-font-size);
font-weight: var(--smbk-typography-body-md-font-weight);
line-height: var(--smbk-typography-body-md-line-height);
letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}
.smbk-list__item {
min-width: 0;
overflow-wrap: break-word;
}
.smbk-list__empty {
margin: 0;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
/* ---- text lists: bulleted and numbered rows hold a marker and the text; the marker hugs a bullet and
gives a number a fixed column, so the texts of a numbered list line up. ---- */
.smbk-list:is(.smbk-list--type-bulleted, .smbk-list--type-numbered) .smbk-list__item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: var(--smbk-space-inline-md);
row-gap: var(--smbk-space-text-list);
}
.smbk-list__marker {
flex: none;
color: var(--smbk-color-text-subtle);
}
.smbk-list--type-numbered .smbk-list__marker {
min-width: var(--smbk-size-20);
}
/* A numbered row's marker left empty counts itself; one written by hand shows what was written. */
.smbk-list--type-numbered .smbk-list__items {
counter-reset: smbk-list;
}
.smbk-list--type-numbered .smbk-list__item {
counter-increment: smbk-list;
}
.smbk-list--type-numbered .smbk-list__marker:empty::before {
content: counter(smbk-list) ".";
}
.smbk-list__text {
flex: 1 1 0;
min-width: 0;
}
/* ---- rows: navigation, action and selectable ---- */
.smbk-list:is(.smbk-list--type-navigation, .smbk-list--type-action, .smbk-list--type-selectable) .smbk-list__items {
gap: var(--smbk-space-0);
}
.smbk-list:is(.smbk-list--type-navigation, .smbk-list--type-action, .smbk-list--type-selectable) .smbk-list__item {
display: flex;
flex-direction: column;
}
.smbk-list__row {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--smbk-space-inline-lg);
width: 100%;
min-height: var(--smbk-size-control-md);
margin: 0;
padding: calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline)) calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline));
border: var(--smbk-border-width-hairline) solid transparent;
border-radius: var(--smbk-radius-control-md);
background: transparent;
color: var(--smbk-color-text-default);
font: inherit;
letter-spacing: inherit;
text-align: start;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.smbk-list--size-md .smbk-list__row {
min-height: var(--smbk-size-control-lg);
padding-block: calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline));
}
:where(a[href], button).smbk-list__row,
.smbk-list__item[role="option"] {
cursor: pointer;
}
.smbk-list__start,
.smbk-list__end {
flex: none;
display: flex;
align-items: center;
gap: var(--smbk-space-stack-sm);
}
.smbk-list__leading {
flex: none;
color: var(--smbk-color-icon-subtle);
font-size: var(--smbk-size-icon-md);
}
.smbk-list__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--smbk-space-text-label);
min-width: 0;
}
.smbk-list__item-title {
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-body-md-font-family);
font-size: var(--smbk-typography-body-md-font-size);
font-weight: var(--smbk-typography-body-md-font-weight);
line-height: var(--smbk-typography-body-md-line-height);
letter-spacing: var(--smbk-typography-body-md-letter-spacing);
}
/* The title is always as wide as its bolder self: an invisible copy of its words (`data-label`, which the wrapper
writes) at the current row's weight lies under it with no height, so a title that turns bold never pushes
anything beside it. The copy is generated content, hidden, with empty words for assistive technology, so the
title is read once. */
.smbk-list__item-title[data-label]::after {
content: attr(data-label);
content: attr(data-label) / "";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
font-weight: var(--smbk-typography-body-md-medium-font-weight);
pointer-events: none;
user-select: none;
}
.smbk-list__meta {
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
.smbk-list__trailing {
flex: none;
color: var(--smbk-color-icon-subtle);
font-size: var(--smbk-size-icon-sm);
}
/* The tick of a chosen option: in every option, so a row never changes width as it is chosen, and shown
only by the option's own aria-selected, so the look and what a screen reader hears always agree. */
.smbk-list__check {
flex: none;
visibility: hidden;
color: var(--smbk-color-icon-default);
font-size: var(--smbk-size-icon-sm);
}
/* ---- states. Hover and pressed fill a row that can be pressed; the current row and the chosen option
keep their own look under the pointer. ---- */
/* With the wrapper the pointer's fill is the glide part instead (below), so a row's own hover is drawn only in
markup without it. */
@media (hover: hover) {
:where(a[href], button:enabled).smbk-list__row:hover:where(:not([data-glide] *)),
.smbk-list__item:where([role="option"]:not([aria-disabled="true"])):hover:where(:not([data-glide] *)) > .smbk-list__row {
background: var(--smbk-color-action-ghost-background-hover);
}
}
:where(a[href], button:enabled).smbk-list__row:active,
.smbk-list__item:where([role="option"]:not([aria-disabled="true"])):active > .smbk-list__row {
background: var(--smbk-color-action-ghost-background-pressed);
}
/* An option takes focus itself; its row draws the ring. */
.smbk-list__item[role="option"] {
outline: none;
}
.smbk-list__row:focus-visible,
.smbk-list__item[role="option"]:focus-visible > .smbk-list__row {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
}
/* Where the reader is: the default surface, the rim for its edge and the title one weight bolder. */
.smbk-list__row[aria-current]:not([aria-current="false"]) {
border-color: var(--smbk-color-border-rim);
background: var(--smbk-color-surface-default);
}
.smbk-list__row[aria-current]:not([aria-current="false"]) .smbk-list__item-title {
font-weight: var(--smbk-typography-body-md-medium-font-weight);
}
/* A chosen option: the see-through selected fill and its tick. The fill shows on the page and on a card alike,
and is the fill made for chosen items, as in the sidebar. */
.smbk-list__item[aria-selected="true"] > .smbk-list__row {
background: var(--smbk-color-surface-selected);
}
.smbk-list__item[aria-selected="true"] > .smbk-list__row .smbk-list__check {
visibility: visible;
}
/* Tickless: a row that opens as it is chosen keeps the fill and takes the title one weight bolder, as the current row
does, so it never shows by color alone; the tick takes no room. */
.smbk-list--tickless .smbk-list__check {
display: none;
}
.smbk-list--tickless .smbk-list__item[aria-selected="true"] > .smbk-list__row .smbk-list__item-title {
font-weight: var(--smbk-typography-body-md-medium-font-weight);
}
.smbk-list__row:is(:disabled, [aria-disabled="true"]),
.smbk-list__item[aria-disabled="true"] > .smbk-list__row {
cursor: default;
}
.smbk-list__row:is(:disabled, [aria-disabled="true"]) :is(.smbk-list__item-title, .smbk-list__meta),
.smbk-list__item[aria-disabled="true"] > .smbk-list__row :is(.smbk-list__item-title, .smbk-list__meta) {
color: var(--smbk-color-text-disabled);
}
.smbk-list__row:is(:disabled, [aria-disabled="true"]) :is(.smbk-list__leading, .smbk-list__trailing, .smbk-list__check),
.smbk-list__item[aria-disabled="true"] > .smbk-list__row :is(.smbk-list__leading, .smbk-list__trailing, .smbk-list__check) {
color: var(--smbk-color-icon-disabled);
}
/* ---- the glide: with the wrapper, when every row can be pressed, the hover fill is one part that slides to the
row under the mouse (glide.ts) instead of each row lighting up on its own, so a pointer on a divider or past
the last row still lights the nearest row. The wrapper adds it as the rows' first child and marks the list
data-glide ("lit" while it shows); the rows are lifted over it, so a current or chosen row's own fill still
shows over it. It fades in where it lands and out as the pointer leaves, and slides with the feedback purpose;
under reduced motion it lands at once and only fades. A touch screen draws none. ---- */
:where(.smbk-list__items[data-glide]) {
position: relative;
}
:where(.smbk-list__items[data-glide] > :not(.smbk-list__glide)) {
position: relative;
}
.smbk-list__glide {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
margin: 0;
border-radius: var(--smbk-radius-control-md);
background: var(--smbk-color-action-ghost-background-hover);
opacity: 0;
pointer-events: none;
list-style: none;
transition-property: translate, width, height, opacity;
transition-duration: var(--smbk-motion-feedback-duration);
transition-timing-function: var(--smbk-motion-feedback-easing);
}
.smbk-list__items[data-glide="lit"] > .smbk-list__glide {
opacity: 1;
}
.smbk-list__glide[data-instant] {
transition-property: opacity;
}
@media (prefers-reduced-motion: reduce) {
.smbk-list__glide {
transition-property: opacity;
}
}
@media (hover: none) {
.smbk-list__glide {
display: none;
}
}
/* ---- dividers: the divider component ends each row but the last. Between text rows it keeps the list's
spacing on both sides; between rows that can be pressed the rows touch it. ---- */
.smbk-list__item:last-child > .smbk-list__divider {
display: none;
}
.smbk-list--type-plain .smbk-list__divider {
margin-block-start: var(--smbk-space-text-list);
}
.smbk-list:is(.smbk-list--type-bulleted, .smbk-list--type-numbered) .smbk-list__divider {
flex-basis: 100%;
}
/* ---- touch: every row takes an invisible press area ----
On a touch screen an invisible area, centred on each row, takes the press out to the comfortable target in each
direction it falls short of it, except where two rows touch: there each keeps its own edge, so the rows stay one
press each. What is drawn and every place stay as they are. */
@media (pointer: coarse) {
:is(a[href], button).smbk-list__row,
.smbk-list__item[role="option"] {
position: relative;
}
:is(a[href], button).smbk-list__row::after,
.smbk-list__item[role="option"]::after {
content: '';
position: absolute;
inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
}
.smbk-list__item + .smbk-list__item > :is(a[href], button).smbk-list__row::after,
.smbk-list__item[role="option"] + .smbk-list__item[role="option"]::after {
inset-block-start: 0;
}
.smbk-list__item:has(+ .smbk-list__item) > :is(a[href], button).smbk-list__row::after,
.smbk-list__item[role="option"]:has(+ .smbk-list__item[role="option"])::after {
inset-block-end: 0;
}
}
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills; this puts the current row and the chosen option
back with the user's own colors. Nothing here applies outside that mode. */
@media (forced-colors: active) {
.smbk-list__row[aria-current]:not([aria-current="false"]),
.smbk-list__item[aria-selected="true"] > .smbk-list__row {
forced-color-adjust: none;
border-color: Highlight;
background: Highlight;
color: HighlightText;
}
.smbk-list__row[aria-current]:not([aria-current="false"]) :is(.smbk-list__item-title, .smbk-list__meta, .smbk-list__leading, .smbk-list__trailing),
.smbk-list__item[aria-selected="true"] > .smbk-list__row :is(.smbk-list__item-title, .smbk-list__meta, .smbk-list__leading, .smbk-list__check) {
color: HighlightText;
}
.smbk-list__row:focus-visible,
.smbk-list__item[role="option"]:focus-visible > .smbk-list__row {
outline-color: CanvasText;
}
.smbk-list__row:is(:disabled, [aria-disabled="true"]) :is(.smbk-list__item-title, .smbk-list__meta, .smbk-list__leading, .smbk-list__trailing),
.smbk-list__item[aria-disabled="true"] > .smbk-list__row :is(.smbk-list__item-title, .smbk-list__meta, .smbk-list__leading, .smbk-list__check) {
color: GrayText;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.stack.md--smbk-space-stack-md | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| color.text.default--smbk-color-text-default | light: #232527dark: #e7ebf0changes with theme | Color | |
| typography.label-lg--smbk-typography-label-lg-font-family--smbk-typography-label-lg-font-size--smbk-typography-label-lg-font-weight--smbk-typography-label-lg-line-height--smbk-typography-label-lg-letter-spacing--smbk-typography-label-lg-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
| space.text.list--smbk-space-text-list | comfortable: 8pxcompact: 6px | Spacing | |
| typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| color.text.subtle--smbk-color-text-subtle | light: #4e555edark: #9ba5b1changes with theme | Color | |
| typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| space.inline.md--smbk-space-inline-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| size.20--smbk-size-20 | 20px | Size | |
| space.0--smbk-space-0 | 0px | Spacing | |
| space.inline.lg--smbk-space-inline-lg | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| size.control.md--smbk-size-control-md | comfortable: 40pxcompact: 32pxchanges with density | Size | |
| space.inset.md--smbk-space-inset-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| border-width.hairline--smbk-border-width-hairline | 1px | Border width | |
| space.inset.lg--smbk-space-inset-lg | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| radius.control.md--smbk-radius-control-md | 6px | Radius | |
| size.control.lg--smbk-size-control-lg | comfortable: 48pxcompact: 40pxchanges with density | Size | |
| space.stack.sm--smbk-space-stack-sm | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| color.icon.subtle--smbk-color-icon-subtle | light: #4e555edark: #c4cdd8changes with theme | Color | |
| size.icon.md--smbk-size-icon-md | 20px | Size | |
| space.text.label--smbk-space-text-label | 0px | Spacing | |
| typography.body-md-medium--smbk-typography-body-md-medium-font-family--smbk-typography-body-md-medium-font-size--smbk-typography-body-md-medium-font-weight--smbk-typography-body-md-medium-line-height--smbk-typography-body-md-medium-letter-spacing--smbk-typography-body-md-medium-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| size.icon.sm--smbk-size-icon-sm | 16px | Size | |
| color.icon.default--smbk-color-icon-default | light: #232527dark: #e7ebf0changes with theme | Color | |
| color.action.ghost.background-hover--smbk-color-action-ghost-background-hover | light: #373d4326dark: #606a754dchanges with theme | Color | |
| color.action.ghost.background-pressed--smbk-color-action-ghost-background-pressed | light: #c4cdd8dark: #2d3237 | Color | |
| focus.ring.width--smbk-focus-ring-width | 2px | Focus | |
| color.border.focus--smbk-color-border-focus | light: #cc0d0ddark: #f34336changes with theme | Color | |
| focus.ring.offset--smbk-focus-ring-offset | 2px | Focus | |
| color.border.rim--smbk-color-border-rim | light: #ffffffe6dark: #ffffff0dchanges with theme | Color | |
| color.surface.default--smbk-color-surface-default | light: #f3f5f8dark: #181a1cchanges with theme | Color | |
| color.surface.selected--smbk-color-surface-selected | light: #373d431adark: #606a7533changes with theme | Color | |
| color.text.disabled--smbk-color-text-disabled | light: #7c8692dark: #606a75changes with theme | Color | |
| color.icon.disabled--smbk-color-icon-disabled | light: #9ba5b1dark: #606a75changes with theme | Color | |
| motion.feedback.duration--smbk-motion-feedback-duration | 150ms | Motion | |
| motion.feedback.easing--smbk-motion-feedback-easing | cubic-bezier(0.16, 1, 0.3, 1) | Motion | |
| size.target.comfortable--smbk-size-target-comfortable | 44px | Size |
Manifest
{
"name": "list",
"block": "smbk-list",
"summary": "Rows of the same kind, one thing each: plain, bulleted or numbered text, or rows with an icon, a title and a quiet line that go somewhere, do something or can be chosen.",
"adapt": "css",
"axes": {
"type": {
"values": [
"plain",
"bulleted",
"numbered",
"navigation",
"action",
"selectable"
],
"default": "plain",
"description": "Plain, bulleted and numbered lists are text. Navigation rows are links, action rows are buttons or hold one, and selectable rows are options a reader chooses."
},
"size": {
"values": [
"sm",
"md"
],
"default": "sm",
"description": "The rows of navigation, action and selectable lists: sm rows are at least 40 tall, md rows 48, with more room above and below. Text lists have one size."
}
},
"flags": {
"dividers": {
"description": "A line between rows, for rows that are actions or choices. Text lists are grouped by their spacing and rarely need one."
},
"tickless": {
"description": "A selectable list whose chosen row shows by its fill and a bolder title, with no tick: for a list where choosing a row opens it, such as an inbox beside its reading pane, where a tick would read as chosen for later. The keyboard and what a screen reader hears stay the same."
}
},
"parts": [
"title",
"items",
"item",
"marker",
"text",
"row",
"start",
"leading",
"body",
"item-title",
"meta",
"trailing",
"check",
"end",
"divider",
"empty",
"glide"
],
"figmaNodeId": "7113:863"
}