Card

import { Card } from '@tangible/ui';

Interactive docs and examples: Card in Storybook.

Card props

Prop	Type	Default	Description
`as?`	`"article" \| "div" \| "section"`	`'article'`
`children?`	`React.ReactNode`
`className?`	`string`
`disabled?`	`boolean`
`elevated?`	`boolean`		Deprecated. Use `variant="elevated"`.
`inline?`	`boolean`		Deprecated. Use `mode="inline"`.
`interactive?`	`boolean`
`mode?`	`"inline" \| "stacked"`	`'stacked'`	Content arrangement.
`onClick?`	`React.MouseEventHandler<HTMLElement>`		Deprecated. Use Card.Link for interactive cards. onClick without Card.Link has no keyboard/screen-reader semantics.
`style?`	`React.CSSProperties`
`variant?`	`"elevated" \| "ghost" \| "outline" \| "seamless" \| "solid"`	`'solid'`	Surface treatment.

Also accepts the standard attributes of HTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Prop	Type	Default	Description
`children?`	`React.ReactNode`
`className?`	`string`

Also accepts the standard attributes of HTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Prop	Type	Default	Description
`children?`	`React.ReactNode`
`className?`	`string`

Also accepts the standard attributes of HTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Prop	Type	Default	Description
`children?`	`React.ReactNode`
`className?`	`string`

Also accepts the standard attributes of HTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Prop	Type	Default	Description
`alt`	`string`		Alt text — pass `""` for decorative media.
`flush?`	`boolean`	`true`	Full-bleed media (negative-margin, square outer corners).

Also accepts the standard attributes of ImgHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Takes the standard attributes of AnchorHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Variants: The five surface variants. solid (default) and elevated fill; outline is border-only; ghost and seamless are chrome-less (seamless also drops padding). On a tinted surface the fill-less variants read against the background.
Variants — interactive: With interactive (or a Card.Link child): solid/outline/elevated shift border/shadow on hover, ghost reveals a fill (--tui-card-bg-interact → bg-muted), seamless changes nothing but still gets a focus ring. Hover / tab to see each.
Card.Media — stacked & inline: Card.Media (flush by default) is full-bleed at the top in stacked and covers the side in inline. The outer corners follow the card radius via concentric-radius geometry.
Grid — footers pinned: Cards of different content lengths in a grid row. .tui-card__inner is a full-height flex column in stacked mode, so a Card.Foot with .tui-margin-block-start-auto sinks to the bottom edge — the two footers align on the baseline of the taller card rather than floating directly under their (shorter) body copy. Cards without a foot simply leave the trailing space empty. This is the personal-site “What I’m working on” layout.

Other stories: Basic, Inline, With Stretched Link, Elevated, Disabled, Inline + Elevated (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.