cardPadding

Pads a card cell through custom properties that cardMedia reads back.

tsx

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

Signature

typescript

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

Returns one mixin for the cell.

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

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

Constant

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

typescript

const ICON_TILE_SIDE = 10

Interface

Options accepted by cardGrid.

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

Interface

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

Member	Type	Required	Description
`query`	`string`	Yes	Container size query, such as `(36rem <= width < 48rem)`.
`columns`	`number`	Yes	The most items one row holds in this range.
`columnsFor`	`(count: number) => number`	No	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.