'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
ContainedList
A titled list in its own container, with an action: members, recent files, integrations. Rows hold an icon or avatar, a description and actions; three row sizes; a card or a flat version for panels.
import { ContainedList, ContainedListItem } from '@alea/ui';
Examples
ContainedList
A titled list in its own card, with an action and rows that hold an icon or avatar, a description and actions. disclosed is the flat version for panels and popovers.
Members
- Ana Rivasana@alea.devOwner
- Bruno Díazbruno@alea.dev
- Carla MendesInvitedPending
Integrations
- FigmaConnected
- Code repositoryConnected
- Team chat
- Docs
Configurations
Every value of every property, side by side. Numbers match the legend below.
- Kind
kind - Size
size
Anatomy
The parts of the component and the class that styles each one.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-surface…
Space
--alea-space-2…
Radius
--alea-radius-lg…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…
Props
ContainedList props
A titled list in its own container, with an action: recent files, members, integrations. Rows hold text, an icon or avatar at the start, and actions at the end.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | ContainedListItem elements. |
labelrequired | ReactNode | - | The title of the list. |
action | ReactNode | - | An action beside the title: Add, View all. |
className | string | - | Extra class names. |
headingLevel | 2 | 3 | 4 | 3 | Heading level of the title. Default 3. |
kind | "on-page" | "disclosed" | 'on-page' | on-page (a card, default) or disclosed (flat, for lists inside popovers and panels). |
size | "sm" | "md" | "lg" | 'md' | sm (40 px rows), md (48 px, default) or lg (64 px). |
ContainedListItem props
One row of a ContainedList.
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | A second line. |
end | ReactNode | - | Meta or actions at the end. |
href | string | - | Makes the whole row a link. |
start | ReactNode | - | An icon or avatar at the start. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
ContainedList
- Variants
kindon-pagedisclosedsizesmmdlg- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-clist.alea-clist-head.alea-clist-title.alea-clist-action.alea-clist-items- Data attributes
data-size=smdata-size=lgdata-kind=on-page
ContainedListItem
- States
- Hover (CSS)
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-clist-start.alea-clist-text.alea-clist-name.alea-clist-desc.alea-clist-item.alea-clist-link.alea-clist-end
Accessibility
- The title is a heading and the rows are a list; link rows are real links.
- Actions at the end keep their own names (name the person or item in them).
Keyboard
| Key | Does |
|---|---|
| Tab | Moves through links and actions |
Do and don't
Do
- Use it for short lists with a clear title.
Don't
- Don't make a row a link and also put links in it.