Row

A small flex: row wrapper. Abstracts all the flex weirdness away into a component.

Usage

'Read the “', Usage, '” section'

Preview

Row Item 1Row Item 2Row Item 3

Code

RowExample.astro

---
import { Row } from '@studiocms/ui/components';
---

<Row>
  <span>Row Item 1</span>
  <span>Row Item 2</span>
  <span>Row Item 3</span>
</Row>

align-items: center

'Read the “', align-items: center, '” section'

You can pass the alignCenter prop to add the align-items: center CSS property to the row.

RowAlignCenterExample.astro

---
import { Row } from '@studiocms/ui/components';
---

<Row alignCenter>
  <!-- Content -->
</Row>

Gap Size

'Read the “', Gap Size, '” section'

You can change the gap size of the row via the gapSize prop, which can be set to one of sm, md or lg.

Preview

Small RowSmall RowSmall Row

Medium RowMedium RowMedium Row

Large RowLarge RowLarge Row

Code

RowGapSizeExample.astro

---
import { Row } from '@studiocms/ui/components';
---

<Row gapSize='sm'>
  <span>Small Row</span>
  <span>Small Row</span>
  <span>Small Row</span>
</Row>
<!-- Other examples omitted for simplicity -->