Card

A versatile card container for text, lists, images, paragraphs, and other content.

Basic Usage

Set the card title with the header prop.

Basic Usage

Simple Card

The title can be omitted, keeping only the content area.

Simple Card

Extra Actions

Use the #extra slot to add action buttons on the right side of the header.

Extra Actions

Shadow

Control when the card shadow appears with the shadow prop.

Shadow

Hover Effect

Set the hoverable prop to create a lift effect on hover.

Hover Effect

Loading State

Set the loading prop to show a skeleton loading state.

Loading

Footer

Use the #footer slot to add footer content.

Footer

Sizes

Set the card size with the size prop.

Sizes

Borderless

Set bordered to false to remove the border.

Borderless

Use in Nuxt

The Card component fully supports Nuxt 3/4 environments. Since it is primarily used for structured layouts, server-side rendering (SSR) can pre-generate the complete DOM structure, benefiting SEO optimization and first-screen rendering performance.

Use in Nuxt

SSR Notes:

• ✅ Header, footer, and content areas fully rendered on the server
• ✅ Shadow effects (always/hover/never) support SSR
• ✅ Skeleton loading state (loading) displays on first screen during SSR, avoiding blank screens
• ✅ Size and bordered configurations take effect via CSS class names on the server
• 💡 Interactive logic and dynamic loading state toggling recover reactivity after client-side activation (Hydration)

SEO Optimization

The HTML generated by the Card component is semantically clear. It is recommended to use appropriate heading tags (such as h3) in the header slot to further improve search engine understanding of page content.

API

Props

Prop	Description	Type	Default
header	Card title	string	—
body-style	Style for the card content area	object	—
header-style	Style for the card header	object	—
shadow	When to show card shadow	'always' | 'hover' | 'never'	'always'
bordered	Whether to show border	boolean	true
hoverable	Whether hoverable (lift effect on hover)	boolean	false
size	Card size	'small' | 'default' | 'large'	'default'
loading	Whether loading (shows skeleton)	boolean	false
body-padding	Whether to have padding	boolean	true
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Slots

Slot Name	Description
default	Card content
header	Card title
extra	Card extra action area
footer	Card footer content

Theme Variables

Variable	Description	Default
--yh-card-bg-color	Background color	var(--yh-bg-color-overlay)
--yh-card-border-color	Border color	var(--yh-border-color-light)
--yh-card-border-radius	Border radius	var(--yh-border-radius-base)
--yh-card-header-padding	Header padding	18px 20px
--yh-card-body-padding	Body padding	20px
--yh-card-footer-padding	Footer padding	18px 20px
--yh-card-shadow	Card shadow	var(--yh-box-shadow-light)

Events

This component does not expose component events.

Expose

This component does not expose public instance methods or properties.

Type Exports

Name	Description
YhCardProps	Props type for YhCard
YhCardSlots	Slots type for YhCard
YhCardShadow	Card shadow mode type
YhCardInstance	Public instance type for YhCard