BRAID
Braid Logo
Resources
Releases
Gallery
Playroom
GitHub
Guides
Design Workflow
Development Workflow
Playroom Prototyping
Contribution
Testing Guide
Foundations
Layout
Tones
Iconography
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
Radio
Deprecated
RadioGroup
Rating
Secondary
Stack
Stepper
Strong
Tabs
Tag
Text
TextDropdown
TextField
TextLink
TextLinkButton
Textarea
Tiles
Toggle
TooltipRenderer
useToast
CSS
atoms
breakpoints
globalHeadingStyle
globalTextStyle
responsiveStyle
vars
Logic
BraidPortal
BraidProvider
BraidTestProvider
Link
ThemeNameConsumer
useBreakpoint
Deprecated
useColor
useResponsiveValue
useSpace
useThemeName
Inline
Details
Details
Props
Props
Releases
Releases
Snippets
Snippets
View code
Code
Open in
Playroom
Alternatives
Columns
— For fine-grained control of widths, spacing and alignment.
Tiles
— For laying out content over many columns and rows.
Box
— For custom layouts.
Spacing
The
spacing
between children can be adjusted using the
space
prop.
Responsive values are supported, e.g.
space={{ mobile: 'small', tablet: 'medium', desktop: 'large', wide: 'xlarge' }}
View code
Code
Open in
Playroom
Vertical alignment
Items of varying height can be vertically aligned using the
alignY
prop. Responsive values are supported.
top
center
bottom
View code
Code
Open in
Playroom
Horizontal alignment
Items can be aligned horizontally using the
align
prop. Responsive values are supported.
left
center
right
View code
Code
Open in
Playroom
Collapsing across breakpoints
Items can be collapsed into a single vertical stack responsively using the
collapseBelow
prop. The following will collapse the list of items into a vertical stack below
tablet
.
View code
Code
Open in
Playroom
BRAID
Braid Logo