# cardPadding

> Pads a card cell through custom properties that cardMedia reads back, so the media slot bleeds to the cell's edges at every padding step.

```ts
import { cardPadding } from "@sdxc/ui/landing";
```

Pads a card cell through custom properties that cardMedia reads back,
so the media slot bleeds to the cell's edges at every padding step.

## Signature

```ts
cardPadding<Node extends Element = Element>(block: string, inline: string, wide: string, containerName?: string): UtilityMixin<Node>
```

Returns: One mixin for the cell.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `block` | `string` | Block padding below the `lg` step. |
| `inline` | `string` | Inline padding below the `lg` step. |
| `wide` | `string` | Padding on both axes from the `lg` container. |
| `containerName?` | `string` | Named container the `lg` step queries; omitted queries the nearest one. |

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/landing` too.

### ICON_TILE_SIDE

Side of a claim's glyph tile on the spacing scale (2.5rem), shared by every claim icon.

#### Signature

```ts
const ICON_TILE_SIDE = 10
```

### CardGridOptions

Options accepted by cardGrid.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `columns` | `number` | Columns at the `lg` container; the grid shows one track on a phone and two from `md`. |
| `variant` | `"cards" \| "mosaic" \| "list"` | Separate raised cards, one hairline-ruled mosaic box, or an un-carded `list`. |
| `containerName` | `string` | Named sizing container on the grid's host that the column steps query. |

### BalancedGridStep

One container range of a balancedGrid: the query that selects it and the
most items one row holds there.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `query` | `string` | Container size query, such as `(36rem <= width < 48rem)`. |
| `columns` | `number` | The most items one row holds in this range. |
| `columnsFor?` | `(count: number) => number` | Columns for a run of exactly `count` items in this range, where the even split would still leave a short row the layout should not show. |