Iryx UILayout & structure
ICard
A panel with an optional header and footer. Two variants, four paddings, and no opinion about what goes inside it.
Invoice INV-1042
Northwind Supply · due 14 March
Four line items totalling €1,240.00.
Variants
outline draws a border on the page background. soft fills instead, for a panel that should sit back rather than stand out.
Outline
Soft
Padding
Use none when the content draws its own edges — a table, a list of rows, an image — and pair it with overflow-hidden so the corners clip.
Design retainer
Hosting, March
Support hours
An ITable is the other common occupant of a none card.
Header and footer slots
title and description are shorthands for the header. Use the slots when either needs markup — an action on the right of the title, say.
Usage
Storage62%
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'outline' | 'soft' | 'outline' | Bordered or filled |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Inner spacing |
title | string | — | Header title, without writing the slot |
description | string | — | Header description |
as | string | 'div' | Element to render |
asChild | boolean | false | Render the child instead, forwarding props |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, header?, title?, description?, body?, footer? } | — | Per-element class overrides |
Slots
| Slot | When to use it |
|---|---|
| default | The card body |
header | Replaces title / description entirely |
title | Keeps the header layout, replaces just the title |
description | Same, for the description |
footer | Actions or a summary along the bottom. Laid out as a row |