@payfit/unity-components/skills/unity-layout/references/patterns.md

# Unity layout patterns

## Flex for one dimension

Use `Flex` for a row or column and `FlexItem` for item-level growth or
alignment.

```tsx
import { Flex, FlexItem } from '@payfit/unity-components'
;<Flex direction="row" gap="200" justify="between" align="center">
  <FlexItem grow="1">Left</FlexItem>
  <FlexItem>Right</FlexItem>
</Flex>
```

`Flex` exposes `asElement`, `inline`, `direction`, `isReversed`, `wrap`,
`gap`, `gapX`, `gapY`, `justify`, `align`, `alignContent`, and `className`.

## Grid for two dimensions

Use `Grid` when content needs row and column placement. Position a `GridItem`
with either `area` or the column props; do not combine the two strategies.

```tsx
import { Grid, GridItem } from '@payfit/unity-components'
;<Grid cols={12} className="uy:gap-200">
  <GridItem colSpan={8}>Main</GridItem>
  <GridItem colSpan={4}>Aside</GridItem>
</Grid>
```

`Grid` exposes `asElement`, `inline`, `cols`, `rows`, `areas`, `flow`,
`justifyItems`, `alignItems`, and `className`.

## Responsive layout

Set the default through props, then apply breakpoint changes with `uy:`
utilities. Read `unity-themes` before choosing utility or token names.

```tsx
<Flex gap="100" className="uy:md:gap-200 uy:lg:gap-300">
  <span>Item</span>
</Flex>

<Grid cols={12} className="uy:grid-cols-1 uy:md:grid-cols-2 uy:lg:grid-cols-3" />
```

## Semantic typography

`Text` selects a semantic element from its variant and supports an explicit
`asElement` override.

```tsx
import { Text } from '@payfit/unity-components'

<Text variant="h1" color="content.primary">Title</Text>
<Text variant="body" color="content.neutral">Description</Text>
<Text variant="h1" asElement="h2">Visual h1, semantic h2</Text>
```