Card
A versatile card container for text, lists, images, paragraphs, and other content.
Basic Usage
Set the card title with the header prop.
Card content. This is some descriptive text.
Cards can contain text, lists, images, paragraphs, etc.
Simple Card
The title can be omitted, keeping only the content area.
A simple card without a title.
Extra Actions
Use the #extra slot to add action buttons on the right side of the header.
Card with extra actions.
Shadow
Control when the card shadow appears with the shadow prop.
This card always shows shadow.
This card only shows shadow on hover.
This card never shows shadow.
Hover Effect
Set the hoverable prop to create a lift effect on hover.
Has a lift effect on hover.
Loading State
Set the loading prop to show a skeleton loading state.
Footer
Use the #footer slot to add footer content.
Card content area.
Sizes
Set the card size with the size prop.
A small-sized card.
A default-sized card.
A large-sized card.
Borderless
Set bordered to false to remove the border.
A card without borders.
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.
In Nuxt, the Card component and all its child components (such as Button, Tag) have built-in auto-import support.
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 |
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) |