A container for grouping related content with optional header and footer.
import { Card } from '@oztix/roadie-components/card'
variant sets the card's shape. default is a plain card and applies when you leave the prop off. ticket cuts a notch into each side where the body meets Card.Footer, with a perforated line between them. The notches are real holes, so whatever sits behind the card shows through. ticket works with every emphasis. On subtler, the fill clears when the card is interactive, the same as a plain subtler card.
direction lays out the card's parts and works on any card. vertical stacks them and applies when you leave the prop off. horizontal gives Card.Footer a column of its own beside the rest of the card, sized to its contents. auto picks between the two: the card stacks in a narrow container and splits at 30rem and up, laying out exactly as horizontal does once it splits. An auto card is a container named card, so its children can use @min-[30rem]/card: and resolve against the card rather than a container further up.
Direction moves the footer, it does not change what belongs in each part. Keep the body in Card.Content and leave the footer for the stub, such as actions or counts.
The footer's column is as wide as its content, so cards in a list can have columns of different widths. Set --card-footer-size once on the list to line them up. Every side column is then at least that wide, and a ticket's perforation follows it. A stacked footer ignores it.
<div className='grid gap-4 [--card-footer-size:11rem]'>{events.map((event) => (<Card key={event.id} variant='ticket' direction='auto'>…</Card>))}</div>
The subtler card has padding around the image, giving it inset rounded corners. The normal card uses a full-bleed image with overflow-hidden.
Card.Image is an Image. Pass width (and height) to serve a right-sized WebP instead of the original, sizes so the fluid card loads small files on small screens, and placeholder='blur' for a blur-up while it loads.
Every card has a Card.Content, which holds its body. Card.Header above it and Card.Footer below it are optional. A header has no bottom padding, so a card with only a title and description puts them in Card.Content, as the main link example does. A card without Card.Content warns in development. Keep a Suspense boundary inside Card.Content, not around it, or the card warns while it loads.
href on Card makes the whole card one link, so nothing else inside it can be a link or a button. When a card also holds other actions, wrap its title in Card.Link instead. The link covers the card, so a click anywhere follows it, and the other links and buttons sit above it and stay clickable. The card takes its hover, press and focus states from the link, and screen readers hear a short link named by the title rather than the whole card.
Pass `render={<button onClick=… />}` for a clickable card, or `render={<MyLink href='/x' />}` for a custom link wrapper. The `render` prop accepts an element, a component, or a function `(defaultProps) => element` for full control.
Deprecated: Use `render` instead. `as` will be removed in v3.0.0.
Pass an href to render the card as a routed anchor. Internal hrefs route through the configured `RoadieLinkProvider`; external hrefs (`http(s)://`, `//…`) render `<a target='_blank' rel='noopener noreferrer'>`; `mailto:` / `tel:` / `sms:` render plain `<a>`. Use `external` to override the auto classification. `render` always wins over `href` smart-routing — pass `render` to render a non-anchor or to bypass provider routing.
Force external-link treatment when `href` is set. Has no effect when `render` is set — the consumer's element is responsible for its own target/rel.
Override the auto `target='_blank'` default on external hrefs.
Override the auto `rel='noopener noreferrer'` default on external hrefs.
Escape hatch — swap the underlying element with full control over the rendered shape. See [Linking](/foundations/linking) for the full reference.
The card's shape. `default` is a plain card. `ticket` cuts a notch into each side where the body meets `Card.Footer`, with a perforated line between them; it works with every emphasis.
Defaults to 'default'.
Layout flow. `vertical` stacks every part. `horizontal` gives `Card.Footer` a column of its own beside the rest of the card. `auto` stacks below 30rem and splits into two columns at or above it. On a `ticket`, the notches and perforation follow the layout in effect.
Defaults to 'vertical'.
The card's body, which every card needs. A card with only a title and description puts them here, since `Card.Header` has no bottom padding. Without one, Card warns in development.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
No additional props. It forwards all standard HTML attributes to the underlying element.
An optional top part, above `Card.Content`. It has no bottom padding, so a card never ends with it.
No additional props. It forwards all standard HTML attributes to the underlying element.
Image URL. Oztix-CDN hosts get the resize/transcode rewrite; everything else passes through.
Alt text describing the image. Required.
1x render width in CSS pixels. Drives the default `srcSet`/`sizes` and reserves layout. Omit to render a plain pass-through `<img>`.
Target/intrinsic height. Reserves layout (via `aspect-ratio`) and, when set alongside `width`, is sent to the proxy so it crops to both dimensions.
Explicit srcSet ladder. Defaults to `[width, width * 2]`.
`<img sizes>` describing how wide the image renders (e.g. `'100vw'`). Set it for fluid images so Roadie builds a responsive ladder and small screens load small files. Defaults to `${width}px` (fixed size).
Marks the image as LCP-critical: eager loading + `fetchpriority="high"`.
Output format. Defaults to `webp`.
Encoder quality, 1–100. Lower trades fidelity for bytes.
Crop surrounding transparent space server-side (ImageSharp `autotrim=1`). Useful for logos padded with transparency. Takes effect with `width`.
Escape hatch for any other ImageSharp.Web command (`rmode`, `ranchor`, `bgcolor`, etc.), merged verbatim. Takes effect with `width`.
Blur-up placeholder: show a tiny low-quality preview, then fade the full image in on load. `'blur'` wraps the image in a positioned element. The preview is derived from the Oztix proxy by default; pass `blurDataURL` for non-Oztix images or to override.
Explicit preview source for `placeholder='blur'`. Required for non-Oztix images.
Art direction: render a `<picture>` with a `<source>` per breakpoint, each able to use a different URL/crop. The component `src` stays the fallback `<img>`. Each entry inherits `format`/`quality`/`autotrim`/`params`/`width` unless it overrides them.
Defer loading until the image nears the viewport via IntersectionObserver. Use inside horizontally-scrolled surfaces (e.g. Carousel) where native `loading='lazy'` over-fetches. Ignored when `priority` is set.
The card's main link, usually wrapping the title text. It covers the whole card, and other links and buttons inside the card stay clickable above it.
Where the card goes. Internal hrefs route through the configured `RoadieLinkProvider`; external hrefs open in a new tab.
Force external-link treatment.
No additional props. It forwards all standard HTML attributes to the underlying element.