Hatch Logo
/

<Columns> Component

Layout with <Columns />

Share
Code Editor


<Columns gap={16} count={2}>

  <Button variant="primary" text="Hello world" />

  <Button variant="secondary" text="Hello world" />

</Columns>

Support for alignment via align prop

Use the align prop to align the children of the <Columns /> component.

Share
Code Editor


<Columns align={{ x: 'center' }} gap={16} count={2}>

  <Button variant="primary" text="Hello world" />

  <Button variant="secondary" text="Hello world" />

</Columns>

Default align

{
    x: 'stretch',
    y: 'center',
}
Share
Code Editor


<Stack>

<Columns count={2}>

  <Button variant="primary" text="Hello world" />

  <Button variant="secondary" text="Hello world" />

</Columns>

<Divider />

<Columns align={{ x: 'start', y: 'end' }} count={2}>

  <Button variant="primary" text="Hello world" />

  <Button variant="secondary" text="Hello world" />

</Columns>

</Stack>

Collapse on responsive breakpoints

Use the collapseBelow prop to collapse the columns on responsive breakpoints.

Share
Code Editor


<Stack>

<Columns count={2} collapseBelow="medium">

  <Button variant="primary" text="We collapse" />

  <Button variant="secondary" text="On mobile" />

</Columns>

<Divider />

<Columns  count={2} collapseBelow="large">

  <Button variant="primary" text="We collapse" />

  <Button variant="secondary" text="On Tablet" />

</Columns>

</Stack>