// Generated by scripts/generate-showcase.mjs. Do not edit directly. page CardDetail { layout = "showcase" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Team workspace" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_titleKey = ctx.url.searchParams.get("pg_titleKey") ?? "" state playground_subtitle = ctx.url.searchParams.get("pg_subtitle") ?? "" state playground_subtitleKey = ctx.url.searchParams.get("pg_subtitleKey") ?? "" state playground_description = ctx.url.searchParams.get("pg_description") ?? "One place for your projects, files, and conversations." state playground_descriptionKey = ctx.url.searchParams.get("pg_descriptionKey") ?? "" state playground_showHeader = (ctx.url.searchParams.get("pg_showHeader") ?? "true") === "true" state playground_showFooter = (ctx.url.searchParams.get("pg_showFooter") ?? "true") === "true" 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") ?? "" state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? "" state playground_imagePosition = ctx.url.searchParams.get("pg_imagePosition") ?? "top" state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "" state playground_actionLabelKey = ctx.url.searchParams.get("pg_actionLabelKey") ?? "" state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "" state playground_headerActions = JSON.parse(ctx.url.searchParams.get("pg_headerActions") ?? "[]") state playground_navigation = JSON.parse(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") === "true" 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") === "true" 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 = JSON.parse(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_radius = ctx.url.searchParams.get("pg_radius") ?? "default" state playground_shadow = ctx.url.searchParams.get("pg_shadow") ?? "default" state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "false") === "true" state playground_scrollable = (ctx.url.searchParams.get("pg_scrollable") ?? "false") === "true" state playground_maxHeight = ctx.url.searchParams.get("pg_maxHeight") ?? "18rem" state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "false") === "true" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Card" description = "Group related content in a responsive themed surface with title, description, content, and supporting slots." } view {
Base component

Card

Group related content in a responsive themed surface with title, description, content, and supporting slots.

41 props3 slots6 outputsTheme readyResponsive
Interactive playground

Configure Card

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

Live preview

Supporting content belongs inside the default slot.

Component code
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      title="Team workspace"
      description="One place for your projects, files, and conversations."
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}">
      <div data-slot="header">
        <div class="showcase-slot">header slot</div>
      </div>
      <div data-slot="footer">
        <div class="showcase-slot">footer slot</div>
      </div>
    </Card>
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props41 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Structured content card

Group a title, description, content, and supporting actions.

01
Live preview

Supporting content belongs inside the default slot.

Component usage.wrn
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      title="Citizen service"
      description="Access a trusted online service."
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}">
      <div data-slot="header">
        <div class="showcase-slot">header slot</div>
      </div>
      <p class="showcase-card-copy">Supporting content belongs inside the default slot.</p>
      <div data-slot="footer">
        <div class="showcase-slot">footer slot</div>
      </div>
    </Card>
  }
}
Compact

Compact dashboard card

Use reduced spacing for metrics, filters, and operational information.

02
Live preview
38
Component usage.wrn
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      title="Open requests"
      description="Requests waiting for assignment."
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}"
      size="compact"
      variant="soft">
      <div data-slot="header">
        <div class="showcase-slot">header slot</div>
      </div>
      <strong class="showcase-card-value">38</strong>
      <div data-slot="footer">
        <div class="showcase-slot">footer slot</div>
      </div>
    </Card>
  }
}
Advanced

Featured resource

Keep the description and next action together in a single surface.

03
Live preview
Read guide
Component usage.wrn
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      title="Featured guide"
      description="A complete guide to public safety and emergency readiness."
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}"
      size="lg">
      <div data-slot="header">
        <div class="showcase-slot">header slot</div>
      </div>
      <a href="#guide" class="showcase-action">Read guide</a>
      <div data-slot="footer">
        <div class="showcase-slot">footer slot</div>
      </div>
    </Card>
  }
}
Recommended

Image with footer

A cover image, concise body, and separate footer.

04
Live preview
Component usage.wrn
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      title="Design your next chapter"
      description="A practical guide to building thoughtful products."
      footer="6 min read"
      imageSrc="/showcase-images/green-hero.svg"
      imageAlt="Green abstract cover"
      actionLabel="Read guide"
      actionHref="#guide"
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}">
      <div data-slot="header">
        <div class="showcase-slot">header slot</div>
      </div>
      <div data-slot="footer">
        <div class="showcase-slot">footer slot</div>
      </div>
    </Card>
  }
}
Compact

Without a header

Body content with an optional footer; no reserved heading space.

05
Live preview
Component usage.wrn
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      description="Your workspace is ready. Invite your teammates to get started."
      footer="Updated just now"
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}">
      <div data-slot="header">
        <div class="showcase-slot">header slot</div>
      </div>
      <div data-slot="footer">
        <div class="showcase-slot">footer slot</div>
      </div>
    </Card>
  }
}
Advanced

Image-only card

A simple image surface without header or footer chrome.

06
Live preview
Component usage.wrn
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      imageSrc="/showcase-images/blue-mountain.svg"
      imageAlt="Blue geometric landscape"
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}">
      <div data-slot="header">
        <div class="showcase-slot">header slot</div>
      </div>
      <div data-slot="footer">
        <div class="showcase-slot">footer slot</div>
      </div>
    </Card>
  }
}
Advanced

Custom slots

Supply arbitrary header, body, and footer content. Use showHeader and showFooter to hide either region.

07
Live preview
Team invitation
Component usage.wrn
page CardExample {
  state headerActions = []
  state navigation = []
  state items = []
  view {
    <Card
      headerActions="{headerActions}"
      navigation="{navigation}"
      items="{items}">
      <div data-slot="header">
        <strong>Team invitation</strong>
      </div>
      <Input label="Email" placeholder="name@company.com" />
      <div data-slot="footer">
        <Button label="Send invitation" />
      </div>
    </Card>
  }
}
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@clickFires when the interactive surface is activated.
@actionFires when the component's primary or item action is activated.
@navigateFires when the component emits the navigate event.
@dismissFires after the announcement or feedback surface is dismissed.
@loadFires after remote or deferred content loads successfully.
@errorFires when the component cannot complete an operation.
Declarative handlers.wrn
<Card
  @click='console.log(payload)'
  @action='console.log(payload)'
  @navigate='console.log(payload)'
  @dismiss='console.log(payload)'
  @load='console.log(payload)'
  @error='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Card\"], [data-component=\"Card\"]")

if (component) registerOutputHandler(component, "click", (payload) => {
  console.log("click", payload)
})

if (component) registerOutputHandler(component, "action", (payload) => {
  console.log("action", payload)
})

if (component) registerOutputHandler(component, "navigate", (payload) => {
  console.log("navigate", payload)
})

if (component) registerOutputHandler(component, "dismiss", (payload) => {
  console.log("dismiss", payload)
})

if (component) registerOutputHandler(component, "load", (payload) => {
  console.log("load", payload)
})

if (component) registerOutputHandler(component, "error", (payload) => {
  console.log("error", payload)
})
Component API

Props and configuration

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

PropTypeDefaultRequired
titlestring""No
iconstring""No
titleKeystring""No
subtitlestring""No
subtitleKeystring""No
descriptionstring""No
descriptionKeystring""No
showHeaderbooleantrueNo
showFooterbooleantrueNo
headerstring""No
footerstring""No
imageSrcstring""No
imageAltstring""No
imagePositionstring"top"No
actionLabelstring""No
actionLabelKeystring""No
actionHrefstring""No
headerActionsunknown[][]No
navigationunknown[][]No
activeNavstring""No
mobileNavigationbooleanfalseNo
alertTitlestring""No
alertDescriptionstring""No
emptybooleanfalseNo
emptyTitlestring"No data to show"No
emptyIconstring"icon-[lucide--inbox]"No
itemsunknown[][]No
sizestring"md"No
colorstring"primary"No
variantstring"default"No
layoutstring"vertical"No
alignstring"left"No
hoverstring"none"No
radiusstring"default"No
shadowstring"default"No
equalHeightbooleanfalseNo
scrollablebooleanfalseNo
maxHeightstring"18rem"No
dismissiblebooleanfalseNo
ariaLabelstring""No
classstring""No
} }