Columns
Installation
yarn add @spark-web/columnsUse the columns primitive to layout content in configurable columns.
Each child represents a single column. By default that column will span 1 fraction of the total number of children.
Examples
Gap
The spacing between children can be adjusted using the gap prop.
Vertical alignment
Columns can be aligned vertically using the alignY prop.
Collapsing across breakpoints
Columns can be collapsed into a single vertical stack responsively using the
collapseBelow prop.
Template
If you need more control over how your columns are distributed, you can use the
template prop. template receives an array of numbers that represent the
relative width of each column.
Props
| Prop | Type | Description |
|---|---|---|
alignSelf? | ResponsiveProp<"start" | "center" | "end" | "stretch"> | Overrides the parent's `align-items` value. Controls the alignment of item's on the cross axis. |
alignY? | ResponsiveProp<"top" | "bottom" | "center" | "stretch"> | Vertically align items within the container. |
background? | "body" | "input" | "infoLight" | "criticalLight" | "positiveLight" | "cautionLight" | "muted" | "disabled" | "backdrop" | "surface" | "surfaceMuted" | "surfacePressed" | "fieldAccent" | ... 23 more ... | "positiveMuted" | The `background` property sets the background color of an element. |
border? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border. |
borderBottom? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the bottom side. |
borderLeft? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the left side. |
borderRadius? | ResponsiveProp<"small" | "medium" | "large" | "full"> | The `borderRadius` property rounds the corners of an element's outer border edge. |
borderRight? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the right side. |
borderTop? | ResponsiveProp<"fieldAccent" | "accent" | "accentMuted" | "neutral" | "primary" | "secondary" | "caution" | "cautionMuted" | "critical" | "criticalMuted" | "info" | "infoMuted" | "positive" | ... 9 more ... | "secondaryActive"> | The `border` property sets the color of an element's border on the top side. |
borderWidth? | ResponsiveProp<"large" | "standard"> | The `borderWidth` property sets the width of an element's border. |
bottom? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `bottom` property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements. |
children? | ReactNode: string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Elements representing each column. Children element to be rendered inside the component. |
className? | string | Custom css styles. |
collapseBelow? | "tablet" | "desktop" | "wide" | At which breakpoint, if any, should the columns collapse. |
cursor? | "default" | "pointer" | The `cursor` property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. |
data? | DataAttributeMap | Sets data attributes on the component. |
flex? | ResponsiveProp<0 | 1> | The `flex` shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. |
flexGrow? | ResponsiveProp<0 | 1> | The `flexGrow` property sets the flex grow factor of a flex item main size. |
flexShrink? | ResponsiveProp<0 | 1> | The `flexShrink` property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`. |
gap? | Gap: "small" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The size of the gap between each column. |
height? | ResponsiveSizing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "full" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "full">> | Sets the element's height. |
id? | string | An identifier which must be unique in the whole document. |
left? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `left` property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. |
margin? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `margin` shorthand property sets the margin area on all four sides of an element at once. |
marginBottom? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `marginBottom` property sets the margin area on the bottom side of an element. |
marginLeft? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `marginLeft` property sets the margin area on the left side of an element. |
marginRight? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `marginRight` property sets the margin area on the right side of an element. |
marginTop? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `marginTop` property sets the margin area on the top side of an element. |
marginX? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `marginY` shorthand property sets the margin area on the left and right of the element. |
marginY? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `marginY` shorthand property sets the margin area on the top and bottom of the element. |
minHeight? | 0 | The `minHeight` property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for `minHeight`. |
minWidth? | 0 | The `minWidth` property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for `minWidth`. |
opacity? | ResponsiveProp<number>: number | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", number>> | Sets the opacity of the element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. |
overflow? | "hidden" | "scroll" | "visible" | "auto" | The `overflow` shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions. |
padding? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `padding` shorthand property sets the padding area on all four sides of an element at once. |
paddingBottom? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `paddingBottom` property sets the height of the padding area on the bottom of an element. |
paddingLeft? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `paddingLeft` property sets the width of the padding area on the left of an element. |
paddingRight? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `paddingRight` property sets the width of the padding area on the right of an element. |
paddingTop? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `paddingTop` property sets the height of the padding area on the top of an element. |
paddingX? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `paddingX` shorthand property sets the padding area on the left and right of the element. |
paddingY? | ResponsiveSpacing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "xlarge" | "xxlarge">> | The `paddingY` shorthand property sets the padding area on the top and bottom of the element. |
position? | ResponsiveProp<"absolute" | "fixed" | "relative" | "sticky"> | The `position` property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements. |
right? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `right` property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. |
shadow? | "small" | "medium" | "large" | The `boxShadow` property adds shadow effects around an element's frame. |
template? | number[] | Define the relative width of each column. By default each column is the same width. |
top? | ResponsiveProp<0>: 0 | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", 0>> | The `top` property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. |
userSelect? | "none" | The `userSelect` property controls whether the user can select text. |
width? | ResponsiveSizing: "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "full" | Partial<Record<"mobile" | "tablet" | "desktop" | "wide", "small" | "none" | "xxsmall" | "xsmall" | "medium" | "large" | "full">> | Sets the element's width. |
zIndex? | ResponsiveProp<"sticky" | "dropdownBlanket" | "dropdown" | "modalBlanket" | "modal" | "notification"> | The `zIndex` property sets the "z-order" of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one. |
Box props are also included as Column props and are not
listed here (excluding display, alignItems, gap, flexDirection,
justifyContent and flexWrap).
Extra props are passed into the underlying Box component.