Skip to main content

Column

Implementation#

import { Col } from "slipstream-ui";
const Example = () => <Col>...</Col>;

Sizing#

Example
Column - sm="1/2"
Column - sm="1/2"
Column - md="1/3"
Column - md="1/3"
Column - md="1/3"
Column - lg="1/4"
Column - lg="1/4"
Column - lg="1/4"
Column - lg="1/4"
<Container>
<Row>
<Col sm="1/2" md="1/3" lg="1/4">
...
</Col>
</Row>
</Container>

Order#

Example
Column - Order 3
Column - Order 2
Column - Order 1
<Container>
<Row>
<Col order="3">...</Col>
<Col order="2">...</Col>
<Col order="1">...</Col>
</Row>
</Container>

Alignment#

A lot of alignment features you see in component libraries add in a class like "justify-content-start" or "align-self-center" to handle alignment of columns in vertical and horizontal directions. The same applies here. Add the respective Tailwind class to your row or column to align your elements vertically or horizontally. See (link: Justify Content) for example documentation.

Props#

AttributeTypeValueDefault ValueDescription
xsstringe.g. "1/2"Set width of column at the xs breakpoint
smstringe.g. "1/3"Set width of column at the sm breakpoint
mdstringe.g. "1/4"Set width of column at the md breakpoint
lgstringe.g. "1/6"Set width of column at the lg breakpoint
xlstringe.g. "full"Set width of column at the xl breakpoint
orderstring1/2/3/4/5/6
7/8/9/10/11/12
first/last/none
Set order of column within row