Card

A container for grouping related content with optional header and footer.

Import

import { Card } from '@oztix/roadie-components/card'

Examples

Default

<Card href='#'>
  <Card.Header>
    <Card.Title>Midnight Frequency</Card.Title>
    <Card.Description>Live at The Triffid, Brisbane</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>An evening of electronic beats and ambient soundscapes under the stars.</p>
  </Card.Content>
</Card>

Emphasis

<div className='grid gap-4'>
  <Card href='#' emphasis='raised'>
    <Card.Header>
      <Card.Title>Raised</Card.Title>
      <Card.Description>Featured event</Card.Description>
    </Card.Header>
    <Card.Content>
      <p>Use for primary or featured content that should stand out.</p>
    </Card.Content>
  </Card>
  <Card href='#' emphasis='normal'>
    <Card.Header>
      <Card.Title>Normal</Card.Title>
      <Card.Description>Standard event</Card.Description>
    </Card.Header>
    <Card.Content>
      <p>Default emphasis for general-purpose cards.</p>
    </Card.Content>
  </Card>
  <Card href='#' emphasis='subtle'>
    <Card.Header>
      <Card.Title>Subtle</Card.Title>
      <Card.Description>Related event</Card.Description>
    </Card.Header>
    <Card.Content>
      <p>Use for secondary or supporting content.</p>
    </Card.Content>
  </Card>
  <Card href='#' emphasis='subtler'>
    <Card.Header>
      <Card.Title>Subtler</Card.Title>
      <Card.Description>Background content</Card.Description>
    </Card.Header>
    <Card.Content>
      <p>Invisible at rest — reveals on hover. Use for interactive lists or grids.</p>
    </Card.Content>
  </Card>
</div>

Intents

<div className='grid gap-4'>
  <Card href='#' intent='accent' emphasis='subtle'>
    <Card.Content>
      <p className='text-sm font-semibold'>On sale now</p>
      <p className='text-sm'>Early bird tickets available until Friday.</p>
    </Card.Content>
  </Card>
  <Card href='#' intent='success' emphasis='subtle'>
    <Card.Content>
      <p className='text-sm font-semibold'>Booking confirmed</p>
      <p className='text-sm'>Your tickets for Sunset Sounds have been reserved.</p>
    </Card.Content>
  </Card>
  <Card href='#' intent='danger' emphasis='subtle'>
    <Card.Content>
      <p className='text-sm font-semibold'>Almost sold out</p>
      <p className='text-sm'>Only 12 tickets remaining for Neon Dusk.</p>
    </Card.Content>
  </Card>
</div>

With image

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.

<div className='grid grid-cols-2 gap-4'>
  <Card href='#' emphasis='subtler'>
    <Card.Image
      src='https://assets.oztix.com.au/image/1226ab55-3d53-47f0-ab4c-cddcf02bb001.png'
      alt='Sunset Harbour Cruise'
      className='aspect-square'
      width={300}
      height={300}
      sizes='(min-width: 640px) 25vw, 50vw'
      placeholder='blur'
    />
    <Card.Header>
      <Card.Title>Sunset Harbour Cruise</Card.Title>
      <Card.Description>17 May &middot; 6:00 PM</Card.Description>
      <Card.Description>Riverside Wharf</Card.Description>
    </Card.Header>
    <Card.Footer>
      <p className='text-strong font-semibold'>$89</p>
    </Card.Footer>
  </Card>
  <Card href='#' className='overflow-hidden'>
    <Card.Image
      src='https://assets.oztix.com.au/image/1226ab55-3d53-47f0-ab4c-cddcf02bb001.png'
      alt='Long Table Dinner'
      width={600}
      height={300}
      sizes='(min-width: 640px) 25vw, 50vw'
    />
    <Card.Header>
      <Card.Description>Dining &amp; Social</Card.Description>
      <Card.Title>Long Table Dinner with Marco Bellucci</Card.Title>
      <Card.Description>24 May &middot; 3 hrs</Card.Description>
    </Card.Header>
  </Card>
</div>

Composition

Use Card.Header, Card.Content, and Card.Footer to structure content.

<Card>
  <Card.Header>
    <Card.Title>Sunset Sounds Festival</Card.Title>
    <Card.Description>3-day music festival — Gold Coast Parklands</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Three days of live music across four stages featuring local and international artists. Food trucks, art installations, and late-night DJ sets.</p>
  </Card.Content>
  <Card.Footer>
    <Button size='sm'>Buy tickets</Button>
    <Button size='sm' emphasis='subtler'>Learn more</Button>
  </Card.Footer>
</Card>

API reference

Card

asElementType
Deprecated

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.

hrefstring

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.

externalboolean

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.

targetstring

Override the auto `target='_blank'` default on external hrefs.

relstring

Override the auto `rel='noopener noreferrer'` default on external hrefs.

renderRoadieRenderProp

Escape hatch — swap the underlying element with full control over the rendered shape. See [Linking](/foundations/linking) for the full reference.

intent"neutral" | "brand" | "brand-secondary" | "accent" | "danger" | "success" | "warning" | "info" | null
emphasis"raised" | "subtle" | "subtler" | "normal" | null

Card.Content

No additional props — forwards all standard HTML attributes to the underlying element.

Card.Description

No additional props — forwards all standard HTML attributes to the underlying element.

Card.Footer

No additional props — forwards all standard HTML attributes to the underlying element.

Card.Header

No additional props — forwards all standard HTML attributes to the underlying element.

Card.Image

srcstring
Required

Image URL. Oztix-CDN hosts get the resize/transcode rewrite; everything else passes through.

altstring
Required

Alt text describing the image. Required.

widthnumber

1x render width in CSS pixels. Drives the default `srcSet`/`sizes` and reserves layout. Omit to render a plain pass-through `<img>`.

heightnumber

Target/intrinsic height. Reserves layout (via `aspect-ratio`) and, when set alongside `width`, is sent to the proxy so it crops to both dimensions.

widthsnumber[]

Explicit srcSet ladder. Defaults to `[width, width * 2]`.

sizesstring

`<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).

priorityboolean

Marks the image as LCP-critical: eager loading + `fetchpriority="high"`.

format"webp" | "png" | "jpg"

Output format. Defaults to `webp`.

qualitynumber

Encoder quality, 1–100. Lower trades fidelity for bytes.

autotrimboolean

Crop surrounding transparent space server-side (ImageSharp `autotrim=1`). Useful for logos padded with transparency. Takes effect with `width`.

paramsRecord<string, string | number | boolean>

Escape hatch for any other ImageSharp.Web command (`rmode`, `ranchor`, `bgcolor`, etc.), merged verbatim. Takes effect with `width`.

placeholder"blur" | "empty"

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.

blurDataURLstring

Explicit preview source for `placeholder='blur'`. Required for non-Oztix images.

sourcesImageSource[]

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.

deferboolean

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.

Card.Title

No additional props — forwards all standard HTML attributes to the underlying element.

Previous page← BadgeNext pageCarousel →