Column

Implementation#

import { Col } from "slipstream-ui";

const Example = () => <Col>...</Col>;

Sizing#

Example

Column - sm="1/2"

Column - md="1/3"

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#

Attribute	Type	Value	Description
xs	string	e.g. "1/2"	Set width of column at the xs breakpoint
sm	string	e.g. "1/3"	Set width of column at the sm breakpoint
md	string	e.g. "1/4"	Set width of column at the md breakpoint
lg	string	e.g. "1/6"	Set width of column at the lg breakpoint
xl	string	e.g. "full"	Set width of column at the xl breakpoint
order	string	1/2/3/4/5/6 7/8/9/10/11/12 first/last/none	Set order of column within row