Card
Preview
Headline
Subhead
Content content content content
Source code
html
<h-card :kind="state.kind" no-padding class="image-card">
<img src="../images/kingfisher.jpg" height="167" />
<h-button kind="filled" content="Action" class="button" />
</h-card>
<h-card
:kind="state.kind"
class="text-card"
:interactable="state.interactable"
:as="state.interactable ? 'button' : 'div'"
>
<h1>Headline</h1>
<h2>Subhead</h2>
<p>Content content content content</p>
</h-card><h-card :kind="state.kind" no-padding class="image-card">
<img src="../images/kingfisher.jpg" height="167" />
<h-button kind="filled" content="Action" class="button" />
</h-card>
<h-card
:kind="state.kind"
class="text-card"
:interactable="state.interactable"
:as="state.interactable ? 'button' : 'div'"
>
<h1>Headline</h1>
<h2>Subhead</h2>
<p>Content content content content</p>
</h-card>Cards display content and actions about a single subject. See the Material 3 documentation for this component.
Props
ts
defineProps<{
// The kind of card to render.
kind: 'elevated' | 'filled' | 'outlined'
// The element or component to render the card as.
as?: string | Component
// Whether the card is interactable.
interactable?: boolean
// Whether the card has no padding.
noPadding?: boolean
}>()defineProps<{
// The kind of card to render.
kind: 'elevated' | 'filled' | 'outlined'
// The element or component to render the card as.
as?: string | Component
// Whether the card is interactable.
interactable?: boolean
// Whether the card has no padding.
noPadding?: boolean
}>()Slots
Default
The default slot is used for the content of the card.