BRAID
Braid Logo
Ctrl
K
Resources
Releases
Gallery
Playroom
GitHub
Guides
Design Workflow
Development Workflow
Playroom Prototyping
Contribution
Testing Guide
Foundations
Layout
Tones
Iconography
Templates
Layouts
New
Sections
New
Examples
Job Summary
Basic Form
Marketing Banner
Components
Accordion
Actions
Alert
Autosuggest
Badge
Bleed
Box
Button
ButtonIcon
ButtonLink
Card
Checkbox
Columns
ContentBlock
Dialog
Disclosure
Divider
Drawer
Dropdown
FieldLabel
FieldMessage
Heading
Hidden
HiddenVisually
Inline
List
Loader
MenuItem
MenuItemCheckbox
MenuItemDivider
MenuRenderer
MonthPicker
Notice
OverflowMenu
Page
PageBlock
Pagination
PasswordField
RadioGroup
Rating
Secondary
Spread
Stack
Stepper
Strong
Table
Tabs
Tag
Text
TextDropdown
TextField
TextLink
TextLinkButton
Textarea
Tiles
Toggle
TooltipRenderer
useToast
CSS
atoms
breakpoints
globalHeadingStyle
globalTextStyle
outlineStyle
responsiveStyle
vars
Logic
BraidPortal
BraidProvider
BraidTestProvider
Link
ThemeNameConsumer
useColor
useResponsiveValue
useSpace
useThemeName
Sections
Card list
A section pattern for displaying a list of items as cards, providing visual separation and a consistent structure for each item.
Heading (optional)
Item 1
Ea proident nulla veniam
Lorem ipsum
2d ago
Item 2
Occaecat ad sunt elit
Consectetur adipiscing
6d ago
Item 3
Commodo exercitation nisi laborum
Vel odio
3w ago
Action (optional)
View code
Code
Open in
Playroom
Usage
Use when displaying a collection of similar items — such as search results or records — that benefit from defined visual boundaries. For lightweight lists without card treatment, consider the
Divided list
section instead.
BRAID
Braid Logo
Ctrl
K