Item

A row with media, a title, a description and actions.

In Multi-brand

See it live

Start Storybook to see it live: npm run storybook

Live from StorybookOpen Item in StorybookSee it in dark

When to use it

In Multi-brand: A list of account settings, each with a few actions named by a word. Not for records compared cell by cell.

• Use it when: Lists of things such as people, files or settings, each with a few actions.
• Not when: Records people compare cell by cell (a table).

Instead:

• Card: A larger unit with more content.
• Table: Records compared across columns.

Variants

What each variant is for in any design system, then what Multi-brand decided and why. Each sample is the live story with that variant set.

defaultvariantUsed in Multi-brand

Start Storybook to see it live

What it is for

No border and no fill: the row sits on the surface around it.

✓Lists inside a card, panel or menu that already has a frame.

✕Rows that stand alone on the page and need edges.

In Multi-brand

Settings inside a card or menu, which already gives the frame.

Because

What separates groups on the page?Cards · elevation.definition

outlinevariantUsed in Multi-brand

Start Storybook to see it live

What it is for

A border around each row.

✓Rows that stand alone on the page, such as a list of settings.

✕Long lists inside a framed panel, where borders add noise.

In Multi-brand

Account settings on their own page, with a border and the corner each brand sets.

Because

What is the main content?Forms and tasks · content.q1How are corners set?Set by each brand · shape.definition

mutedvariantUsed in Multi-brand

Start Storybook to see it live

What it is for

A soft fill behind the row.

✓A row that should stand out quietly, such as the current one.

✕Every row in a long list.

In Multi-brand

The current setting, with a soft fill from the brand.

Because

How are brands handled?Brands as modes · theming.definition

defaultsizeUsed in Multi-brand

Start Storybook to see it live

What it is for

Comfortable padding.

✓Most lists.

✕Dense panels with many short rows.

In Multi-brand

Every row, at touch size: customers are often on phones.

Because

What is the smallest target?Touch size · accessibility.values

smsizeNot used in Multi-brand

Start Storybook to see it live

What it is for

Tighter padding.

✓Dense panels and short rows.

✕Touch screens and lists people read slowly.

In Multi-brand

One density across brands, at touch size.

Because

How many densities exist?One · spacing.countWhat is the smallest target?Touch size · accessibility.values

Why it works this way

Item looks the way it does because of 6 answers about this product. Each card is one answer, in three steps: the answer, what it decided for Item, and what would move if it changed.

What separates groups on the page?elevation.definition

1The answer

Cards

Cards group plans and offers.

2So Item

• ✓uses default: Settings inside a card or menu, which already gives the frame.

3If it changed

1

Item decision would reopen

and 3 answers that follow from it: Cards too, Two, Cards, menus and dialogs.

What is the main content?content.q1

1The answer

Forms and tasks

Product pages, sign-up and account forms.

2So Item

• ✓uses outline: Account settings on their own page, with a border and the corner each brand sets.

It also shapes Badge: warning Alert: default Input group: inline-start Input group: inline-end Input group: block-start Input group: block-end

3If it changed

2

Item decisions would reopen

and 9 answers that follow from it: A moderate amount, Gaps, insets and row heights, Comfortable, and 6 more.

How are corners set?shape.definition

1The answer

Set by each brand

Each brand sets its own corners.

2So Item

• ✓uses outline: Account settings on their own page, with a border and the corner each brand sets.

3If it changed

1

Item decision would reopen

No other answer follows from it.

How are brands handled?theming.definition

1The answer

Brands as modes

Brands are theme modes over shared semantics.

2So Item

• ✓uses muted: The current setting, with a soft fill from the brand.

It also shapes Sidebar: default Sidebar: outline Empty: default Toggle: outline

3If it changed

1

Item decision would reopen

No other answer follows from it.

What is the smallest target?accessibility.values

1The answer

Touch size

Customers sign up on phones.

2So Item

• ✓uses default: Every row, at touch size: customers are often on phones.
• –does not use sm: One density across brands, at touch size.

It also shapes Button: default Button: compact Button: icon Field: horizontal Toggle: default Toggle: sm

3If it changed

2

Item decisions would reopen

and 1 answer that follow from it: Those and pressed.

How many densities exist?spacing.count

1The answer

One

One density across brands.

2So Item

• –does not use sm: One density across brands, at touch size.

It also shapes Sidebar: default Sidebar: sm Sidebar: lg Toggle: lg

3If it changed

1

Item decision would reopen

No other answer follows from it.

Words

• Shared structure: object, state, next step.
• Brand tone lives in headlines and marketing copy, not in errors.
• Errors and confirmations read the same in every brand.
• Use: Get started, Plan, Order. Avoid: Brand-specific words in errors, Jargon.

The labels components use, from the voice tokens:

• content.action.commit: Save
• content.action.cancel: Cancel
• content.action.destroy: Remove
• content.action.retry: Try again
• content.action.empty-action: Get started

See Voice and tone for the whole voice.

Use it in code

npx open-ds add item

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads

Item reads 32 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Item's tokens to change Item alone.

Changes with theme

Multi-brand decides what changes when you switch theme. Here a switch changes colors, type and shape, so the marked rows differ between its brands and between light and dark; everything else holds steady.

Part	Its token and the semantic it aliases	Value
Item
Corner Changes with theme	component.item.radiusradius.controlvar(--item-radius)	Aster Lightradius.4:0.25remAster Darkradius.4:0.25remBirch Lightradius.12:0.75remBirch Darkradius.12:0.75remCoral Lightradius.999:9999pxCoral Darkradius.999:9999px
Text size	component.item.font-sizetype.body.font-sizevar(--item-font-size)	font.size.16:1rem
Speed	component.item.durationmotion.duration.feedbackvar(--item-duration)	duration.moderate:200ms
Border focus Changes with theme on focus	component.item.border-focuscolor.border.focusvar(--item-border-focus)	Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F
Background hover Changes with theme on hover	component.item.background-hovercolor.surface.sunkenvar(--item-background-hover)	Aster Lightslate-deep.light.100:#F1F5F9Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.100:#F1F5F9Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.100:#F1F5F9Coral Darkslate-deep.dark.100:#1E293B
Focus on focus	component.item.focusborder-width.focusvar(--item-focus)	border-width.2:2px
Focus ring focus Changes with theme on focus	component.item.focus-ring-focuscolor.border.focusvar(--item-focus-ring-focus)	Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F
Focus ring offset focus Changes with theme on focus	component.item.focus-ring-offset-focuscolor.surface.canvasvar(--item-focus-ring-offset-focus)	Aster Lightslate-deep.light.50:#F8FAFCAster Darkslate-deep.dark.0:#020617Birch Lightslate-deep.light.50:#F8FAFCBirch Darkslate-deep.dark.0:#020617Coral Lightslate-deep.light.50:#F8FAFCCoral Darkslate-deep.dark.0:#020617
Gap	component.item.gapspace.gap.defaultvar(--item-gap)	space.12:0.75rem
Outline
Border Changes with theme	component.item.outline.bordercolor.border.defaultvar(--item-outline-border)	Aster Lightslate-deep.light.200:#E2E8F0Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.200:#E2E8F0Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.200:#E2E8F0Coral Darkslate-deep.dark.100:#1E293B
Muted
Fill Changes with theme	component.item.muted.backgroundcolor.surface.sunkenvar(--item-muted-background)	Aster Lightslate-deep.light.100:#F1F5F9Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.100:#F1F5F9Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.100:#F1F5F9Coral Darkslate-deep.dark.100:#1E293B
Default
Gap	component.item.default.gapspace.gap.groupvar(--item-default-gap)	space.24:1.5rem
Padding	component.item.default.paddingspace.inset.containervar(--item-default-padding)	space.24:1.5rem
Sm
Gap	component.item.sm.gapcomponent-spacing-map.x3var(--item-sm-gap)	space.20:1.25rem
Padding, left and right	component.item.sm.padding-xspace.inset.containervar(--item-sm-padding-x)	space.24:1.5rem
Padding, top and bottom	component.item.sm.padding-ycomponent-spacing-map.x3var(--item-sm-padding-y)	space.20:1.25rem
Icon
Size	component.item.icon.sizesize.control.defaultvar(--item-icon-size)	size.44:2.75rem
Corner Changes with theme	component.item.icon.radiusradius.badgevar(--item-icon-radius)	Aster Lightradius.4:0.25remAster Darkradius.4:0.25remBirch Lightradius.999:9999pxBirch Darkradius.999:9999pxCoral Lightradius.999:9999pxCoral Darkradius.999:9999px
Fill Changes with theme	component.item.icon.backgroundcolor.surface.sunkenvar(--item-icon-background)	Aster Lightslate-deep.light.100:#F1F5F9Aster Darkslate-deep.dark.100:#1E293BBirch Lightslate-deep.light.100:#F1F5F9Birch Darkslate-deep.dark.100:#1E293BCoral Lightslate-deep.light.100:#F1F5F9Coral Darkslate-deep.dark.100:#1E293B
Icon size	component.item.icon.icon-sizesize.iconvar(--item-icon-icon-size)	size.16:1rem
Image
Corner Changes with theme	component.item.image.radiusradius.badgevar(--item-image-radius)	Aster Lightradius.4:0.25remAster Darkradius.4:0.25remBirch Lightradius.999:9999pxBirch Darkradius.999:9999pxCoral Lightradius.999:9999pxCoral Darkradius.999:9999px
Content
Gap	component.item.content.gapspace.gap.tightvar(--item-content-gap)	space.8:0.5rem
Title
Gap	component.item.title.gapspace.gap.defaultvar(--item-title-gap)	space.12:0.75rem
Text size	component.item.title.font-sizetype.body.font-sizevar(--item-title-font-size)	font.size.16:1rem
Weight	component.item.title.font-weighttype.label.font-weightvar(--item-title-font-weight)	font.weight.600:600
Description
Text size	component.item.description.font-sizetype.body.font-sizevar(--item-description-font-size)	font.size.16:1rem
Weight	component.item.description.font-weighttype.body.font-weightvar(--item-description-font-weight)	font.weight.400:400
Text Changes with theme	component.item.description.labelcolor.text.mutedvar(--item-description-label)	Aster Lightslate-deep.light.600:#4B5A6FAster Darkslate-deep.dark.400:#96A3B5Birch Lightslate-deep.light.600:#4B5A6FBirch Darkslate-deep.dark.400:#96A3B5Coral Lightslate-deep.light.600:#4B5A6FCoral Darkslate-deep.dark.400:#96A3B5
Label 2 Changes with theme	component.item.description.label-2color.action.primaryvar(--item-description-label-2)	Aster Lightteal.light.600:#0F766EAster Darkteal.dark.600:#7FCFC6Birch Lightpurple.light.600:#6D28D9Birch Darkpurple.dark.600:#B79DF7Coral Lightorange.light.600:#C2410CCoral Darkorange.dark.600:#F7A67F
Actions
Gap	component.item.actions.gapspace.gap.defaultvar(--item-actions-gap)	space.12:0.75rem
Header
Gap	component.item.header.gapspace.gap.defaultvar(--item-header-gap)	space.12:0.75rem
Footer
Gap	component.item.footer.gapspace.gap.defaultvar(--item-footer-gap)	space.12:0.75rem
From the system
Edge Changes with theme	color.border.default straight from the system, through --border	Aster Lightslate-deep.light.200 · #E2E8F0Aster Darkslate-deep.dark.100 · #1E293BBirch Lightslate-deep.light.200 · #E2E8F0Birch Darkslate-deep.dark.100 · #1E293BCoral Lightslate-deep.light.200 · #E2E8F0Coral Darkslate-deep.dark.100 · #1E293B