iconTile

Centers a glyph in a square tile so claim icons share one size language.

tsx

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

Usage

Centers a glyph in a square tile so claim icons share one size language. quiet frames it with a hairline ring in the heading ink; brand paints the tinted, bordered badge.

Signature

typescript

iconTile<Node extends Element = Element>(tone: "quiet" | "brand", side: number): UtilityMixin<Node>

Returns one mixin for the tile.

Parameters

Parameter	Type	Required	Description
`tone`	`"quiet" \| "brand"`	Yes	Tile chrome.
`side`	`number`	Yes	Side length on the spacing scale.

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

Constant

ICON_TILE_SIDE

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

CardGridOptions

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.