Skip to content

[Layout foundations] Update Columns component docs and guidance #6906

@laurkim

Description

@laurkim

Update Columns docs

  • Description
  • Examples: descriptions and visuals
  • Add related components section
Update
Description Displays content horizontally in one or more columns with equal spacing between.
Default example description By default, there are 6 columns with 16px spacing between them.
Spacing example description Use the spacing prop to set the amount of space between columns.
Column width example description Individual column width can be adjusted.
Number of columns example description Use the columns prop to set the number and width of columns across breakpoints.
Related components For more control over padding and widths, use the Box component
To lay out a set of smaller components horizontally, use the Inline component

Before and after

Image

Link to Figma

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions