import { Badge } from '@astrojs/starlight/components'

These components help you structure and lay out your emails using email-safe tables. They are imported from `hono-email`:

```tsx
import { Container, Section, Row, Column, Box, Spacer, Flex, Grid, Card } from 'hono-email'
```

---

## `<Container>`

Full-width presentation table for wrapping email sections. Use it to limit content width and center layout.

```tsx
<Container style={{ maxWidth: '560px', margin: '0 auto' }}>
  <Text>Hello</Text>
</Container>
```

## `<Section>`

Full-width presentation table whose direct children are table cells (`<Column>`).

```tsx
<Section>
  <Column width="50%">Left</Column>
  <Column width="50%">Right</Column>
</Section>
```

## `<Row>` / `<Column>`

Table row (`<tr>`) and table cell (`<td>`) helpers for manual layouts.

```tsx
<Row>
  <Column style={{ padding: '12px' }}>Receipt total</Column>
  <Column style={{ padding: '12px' }}>$42.00</Column>
</Row>
```

## `<Box>`

Generic email-safe block wrapper.

```tsx
<Box as="td" style={{ padding: '16px' }}>
  <Text>Content</Text>
</Box>
```

### `as` <Badge text="Optional" variant="note" size="small" />

**Type:** `'div' | 'span' | 'table' | 'tbody' | 'tr' | 'td'` · **Default:** `'div'`

## `<Spacer>`

Explicit email-safe spacing block.

```tsx
<Text>First paragraph</Text>
<Spacer height={24} />
<Text>Second paragraph</Text>
```

### `height` <Badge text="Optional" variant="note" size="small" />

**Type:** `number | string` · **Default:** `16`

Spacer height. Numbers are converted to pixels.

### `width` <Badge text="Optional" variant="note" size="small" />

**Type:** `number | string` · **Default:** `'100%'`

Spacer width. Numbers are converted to pixels.

## `<Flex>`

Table-based layout for horizontal or vertical arrangements. Does **not** use CSS `display: flex`.

```tsx
<Flex align="middle" gap={12} justify="center">
  <Img src="logo.png" alt="Logo" width={32} height={32} />
  <Text>hono-email</Text>
</Flex>
```

### `direction` <Badge text="Optional" variant="note" size="small" />

**Type:** `'row' | 'column'` · **Default:** `'row'`

### `align` <Badge text="Optional" variant="note" size="small" />

**Type:** `'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'` · **Default:** `'top'`

Vertical alignment of child cells.

### `justify` <Badge text="Optional" variant="note" size="small" />

**Type:** `'left' | 'center' | 'right' | 'start' | 'end' | 'space-between'`

Horizontal alignment of the table or space distribution.

### `gap` <Badge text="Optional" variant="note" size="small" />

**Type:** `number | string`

Space between children. Numbers are converted to pixels.

## `<Grid>`

Table-based grid with a fixed column count. Does **not** use CSS `display: grid`.

```tsx
<Grid columns={3} gap={16}>
  <Card>
    <Text>Feature A</Text>
  </Card>
  <Card>
    <Text>Feature B</Text>
  </Card>
  <Card>
    <Text>Feature C</Text>
  </Card>
</Grid>
```

### `columns` <Badge text="Optional" variant="note" size="small" />

**Type:** `number` · **Default:** `2`

Number of columns per row.

### `align` <Badge text="Optional" variant="note" size="small" />

**Type:** `'top' | 'middle' | 'bottom' | 'baseline' | 'stretch'` · **Default:** `'top'`

### `gap` <Badge text="Optional" variant="note" size="small" />

**Type:** `number | string`

Space between grid cells. Numbers are converted to pixels.

## `<Card>`

Bordered table container with email-safe background and padding defaults.

```tsx
<Card padding={32} borderColor="#d1d5db" backgroundColor="#f9fafb">
  <Heading as="h3">Invoice #1234</Heading>
  <Text>Due: January 1, 2026</Text>
</Card>
```

### `backgroundColor` <Badge text="Optional" variant="note" size="small" />

**Type:** `string` · **Default:** `'#ffffff'`

### `borderColor` <Badge text="Optional" variant="note" size="small" />

**Type:** `string` · **Default:** `'#e5e7eb'`

### `borderWidth` <Badge text="Optional" variant="note" size="small" />

**Type:** `number | string` · **Default:** `1`

Numbers are converted to pixels.

### `padding` <Badge text="Optional" variant="note" size="small" />

**Type:** `number | string` · **Default:** `24`

Numbers are converted to pixels.

### `contentStyle` <Badge text="Optional" variant="note" size="small" />

**Type:** `JSX.CSSProperties`

Inline style applied to the inner content cell.

### `width` <Badge text="Optional" variant="note" size="small" />

**Type:** `number | string` · **Default:** `'100%'`