// Generated by scripts/generate-showcase.mjs. Do not edit directly. page CardDetail { layout = "showcase" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Card title" state playground_subtitle = ctx.url.searchParams.get("pg_subtitle") ?? "" state playground_description = ctx.url.searchParams.get("pg_description") ?? "Some quick example text to build on the card title and make up the bulk of the card's content." state playground_header = ctx.url.searchParams.get("pg_header") ?? "" state playground_footer = ctx.url.searchParams.get("pg_footer") ?? "" state playground_imageSrc = ctx.url.searchParams.get("pg_imageSrc") ?? "/card-landscape.svg" state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? "Abstract blue glass shapes" state playground_imagePosition = ctx.url.searchParams.get("pg_imagePosition") ?? "top" state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Go somewhere" state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#card-demo" state playground_headerActions = ctx.url.searchParams.get("pg_headerActions") ?? "" state playground_navigation = ctx.url.searchParams.get("pg_navigation") ?? "" state playground_activeNav = ctx.url.searchParams.get("pg_activeNav") ?? "" state playground_mobileNavigation = ctx.url.searchParams.get("pg_mobileNavigation") ?? "false" state playground_alertTitle = ctx.url.searchParams.get("pg_alertTitle") ?? "" state playground_alertDescription = ctx.url.searchParams.get("pg_alertDescription") ?? "" state playground_empty = ctx.url.searchParams.get("pg_empty") ?? "false" state playground_emptyTitle = ctx.url.searchParams.get("pg_emptyTitle") ?? "No data to show" state playground_emptyIcon = ctx.url.searchParams.get("pg_emptyIcon") ?? "icon-[lucide--inbox]" state playground_items = ctx.url.searchParams.get("pg_items") ?? "" state playground_size = ctx.url.searchParams.get("pg_size") ?? "md" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "vertical" state playground_align = ctx.url.searchParams.get("pg_align") ?? "left" state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "none" state playground_scrollable = ctx.url.searchParams.get("pg_scrollable") ?? "false" state playground_maxHeight = ctx.url.searchParams.get("pg_maxHeight") ?? "18rem" state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "false" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Card" description = "Theme-aware, responsive card component." } view {
Base component

Card

Theme-aware, responsive card component.

31 props1 slots6 eventsTheme readyResponsive
Interactive playground

Configure Card

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  actionLabel="Go somewhere"
  actionHref="#card-demo"
/>
Component props31 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default card

Use a basic card with media, text content, and a supporting action.

01
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  actionLabel="Go somewhere"
  actionHref="#card-demo"
/>
Content

Body

Use the card body for the main content area.

02
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionHref="#card-demo"
/>
Content

Simple card

Use a body-only card when no separate header or footer is needed.

03
Live preview
Component usage.wrn
<Card
  subtitle="Card subtitle"
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
/>
Structure

Header and footer

Add a header, footer, or both when the card needs clearer structure.

04
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  header="Featured"
  footer="Last updated 5 mins ago"
  actionLabel="Card link"
  actionHref="#card-demo"
/>
Structure

Footer only

Separate secondary actions or summary details from the card body.

05
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  footer="Last updated 5 mins ago"
  actionLabel="Card link"
  actionHref="#card-demo"
/>
Sizes

Small

Use a compact card size for denser lists and side panels.

06
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
  size="sm"
/>
Sizes

Default

Use the default card size for most content blocks.

07
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
/>
Sizes

Large

Increase card spacing when content needs more breathing room.

08
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
  size="lg"
/>
Navigation

Navigation

Add navigation in the card header for quick section switching.

09
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
  navigation='[
    {
      "label": "My Account",
      "value": "account"
    },
    {
      "label": "Company",
      "value": "company"
    },
    {
      "label": "Team Members",
      "value": "team"
    }
  ]'
  activeNav="account"
  align="center"
/>
Navigation

Navigation with select on mobile

Replace tabs with a select control when horizontal space is limited.

010
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
  navigation='[
    {
      "label": "My Account",
      "value": "account"
    },
    {
      "label": "Company",
      "value": "company"
    },
    {
      "label": "Team Members",
      "value": "team"
    },
    {
      "label": "Billing",
      "value": "billing"
    }
  ]'
  activeNav="account"
  mobileNavigation="true"
  align="center"
/>
Images

Top image

Place an image at the top for a classic media-card layout.

011
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  footer="Last updated 5 mins ago"
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  actionLabel="Card link"
  actionHref="#card-demo"
/>
Images

Bottom image

Let content lead before media displayed at the bottom.

012
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  footer="Last updated 5 mins ago"
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  imagePosition="bottom"
  actionLabel="Card link"
  actionHref="#card-demo"
/>
Images

Image overlays

Use the image as a background and layer card content on top.

013
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  footer="Last updated 5 mins ago"
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  imagePosition="overlay"
  actionHref="#card-demo"
/>
Animations

Image scaling animation on hover

Scale card media on hover without changing the card layout.

014
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  actionHref="#card-demo"
  hover="image"
/>
Animations

Transition on hover

Animate elevation and position to strengthen the interactive surface.

015
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  actionHref="#card-demo"
  hover="raise"
/>
Card layout

Horizontal

Place image and content side by side on larger screens.

016
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  footer="Last updated 5 mins ago"
  imageSrc="/card-landscape.svg"
  imageAlt="Abstract blue glass shapes"
  actionHref="#card-demo"
  layout="horizontal"
/>
Card layout

Card group

Render attached equal-height cards that stack responsively.

017
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionHref="#card-demo"
  items='[
    {
      "imageSrc": "/card-landscape.svg",
      "title": "Card title",
      "description": "Some quick example text to build on the card title and make up the bulk of the card\'s content.",
      "footer": "Updated 5 mins ago"
    },
    {
      "imageSrc": "/card-landscape.svg",
      "title": "Card title",
      "description": "This card has supporting text below as a natural lead-in.",
      "footer": "Updated 5 mins ago"
    },
    {
      "imageSrc": "/card-landscape.svg",
      "title": "Card title",
      "description": "Some quick example text to build on the card title and make up the bulk of the card\'s content. This has even longer content to demonstrate equal height.",
      "footer": "Updated 5 mins ago"
    }
  ]'
/>
Panels

Top bordered card

Add a colored top border for stronger category or status emphasis.

018
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
  variant="top-border"
/>
Panels

Card actions

Place compact utility actions in a structured card header.

019
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  header="Card actions"
  actionLabel="Card link"
  actionHref="#card-demo"
  headerActions='[
    {
      "label": "Refresh",
      "ariaLabel": "Refresh card",
      "icon": "icon-[lucide--refresh-cw]"
    },
    {
      "label": "Expand",
      "ariaLabel": "Expand card",
      "icon": "icon-[lucide--maximize-2]"
    }
  ]'
  dismissible="true"
/>
Panels

Card with alert

Embed an alert inside a card to surface important feedback.

020
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  header="Featured"
  actionLabel="Card link"
  actionHref="#card-demo"
  alertTitle="Attention needed!"
  alertDescription="This is an alert box."
/>
Panels

Centered body content

Center content for confirmation states and compact summaries.

021
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content."
  actionLabel="Card link"
  actionHref="#card-demo"
  align="center"
/>
Panels

Empty state

Communicate that no data is available with an accessible empty state.

022
Live preview
Component usage.wrn
<Card
  actionHref="#card-demo"
  empty="true"
/>
Panels

Scrollable body

Contain long content inside a fixed-height scrolling card body.

023
Live preview
Component usage.wrn
<Card
  description="Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content."
  actionHref="#card-demo"
  scrollable="true"
  maxHeight="16rem"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@clickFires when the component is activated by pointer or keyboard.
@actionFires when the component's action is selected.
@navigateFires when the component emits the navigate event.
@dismissFires when the component emits the dismiss event.
@loadFires when component data or media finishes loading.
@errorFires when the component encounters an error.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('click', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
titlestring"Card title"No
subtitlestring""No
descriptionstring""No
headerstring""No
footerstring""No
imageSrcstring""No
imageAltstring""No
imagePositionstring"top"No
actionLabelstring""No
actionHrefstring""No
headerActionsstring[]No
navigationstring[]No
activeNavstring""No
mobileNavigationbooleanfalseNo
alertTitlestring""No
alertDescriptionstring""No
emptybooleanfalseNo
emptyTitlestring"No data to show"No
emptyIconstring"icon-[lucide--inbox]"No
itemsstring[]No
sizestring"md"No
colorstring"primary"No
variantstring"default"No
layoutstring"vertical"No
alignstring"left"No
hoverstring"none"No
scrollablebooleanfalseNo
maxHeightstring"18rem"No
dismissiblebooleanfalseNo
ariaLabelstring""No
classstring""No
} }