Marketing component

Feature Card

Present one linked feature or service with media, icon, badge, description, and action.

28 props4 slots0 outputsTheme readyResponsive

Interactive playground

Configure Feature Card

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

Live preview

Feature Card example

A polished default feature card for a modern application.

Component code

<FeatureCard
  title="Feature Card example"
  description="A polished default feature card for a modern application."
  href="#feature-card-demo"
  actionLabel="Feature Card"
  align="start">
  <div data-slot="media">
    <div class="showcase-slot">media slot</div>
  </div>
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureCard>

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Linked service card

Present one service with an icon, hierarchy, badge, and clear action.

Live preview

Public

Citizen support

Citizen services

Report incidents, request certificates, and find safety information.

Component usage.wrn

<FeatureCard
  icon="icon-[lucide--shield-check]"
  eyebrow="Citizen support"
  title="Citizen services"
  description="Report incidents, request certificates, and find safety information."
  href="#citizen-services"
  actionLabel="Explore services"
  badge="Public"
  align="start">
  <div data-slot="media">
    <div class="showcase-slot">media slot</div>
  </div>
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureCard>

Compact

Image-led feature card

Use a visual preview for products, campaigns, dashboards, or service explanations.

Live preview

Featured

Unified citizen portal

Access trusted services from one responsive interface.

Component usage.wrn

<FeatureCard
  icon="icon-[lucide--arrow-right]"
  title="Unified citizen portal"
  description="Access trusted services from one responsive interface."
  image="/showcase-images/dashboard-preview.svg"
  imageAlt="Abstract dashboard preview"
  href="#portal"
  actionLabel="Open portal"
  badge="Featured"
  size="sm"
  color="info"
  variant="raised"
  align="center">
  <div data-slot="media">
    <div class="showcase-slot">media slot</div>
  </div>
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureCard>

Advanced

Solid callout card

Use stronger contrast for a featured capability or high-priority service.

Live preview

Important

Emergency

Get urgent help

Find verified emergency contacts and immediate safety guidance.

Component usage.wrn

<FeatureCard
  icon="icon-[lucide--siren]"
  eyebrow="Emergency"
  title="Get urgent help"
  description="Find verified emergency contacts and immediate safety guidance."
  href="#emergency"
  actionLabel="View emergency help"
  badge="Important"
  size="lg"
  color="danger"
  variant="solid"
  hover="glow"
  align="end">
  <div data-slot="media">
    <div class="showcase-slot">media slot</div>
  </div>
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureCard>

Component API

Props and configuration

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

Prop	Type	Default	Required
`icon`	string	`""`	No
`iconStyle`	string	`"soft"`	No
`iconSize`	string	`"default"`	No
`eyebrow`	string	`""`	No
`title`	string	`"Feature"`	No
`description`	string	`""`	No
`image`	string	`""`	No
`imageAlt`	string	`""`	No
`imagePosition`	string	`"top"`	No
`imageAspect`	string	`"wide"`	No
`imageLoading`	string	`"lazy"`	No
`href`	string	`""`	No
`target`	string	`""`	No
`rel`	string	`""`	No
`external`	boolean	`false`	No
`actionLabel`	string	`"Learn more"`	No
`actionIcon`	string	`""`	No
`showArrow`	boolean	`true`	No
`stretchedLink`	boolean	`true`	No
`badge`	string	`""`	No
`badgeColor`	string	`"primary"`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`hover`	string	`"lift"`	No
`align`	string	`"left"`	No
`disabled`	boolean	`false`	No
`class`	string	`""`	No