Card

Card groups related content with optional cover, header, footer, and actions.

Demos

Basic

Use title for a simple header, or put custom markup in the header slot.

Card content goes in the default slot.

<gk-card title="Basic card">
  Card content goes in the default slot.
</gk-card>

Cover

Set cover to an image URL for a built-in top image, or provide a cover slot (slot wins when present). Cover images use object-fit: cover with a max height.

Cover image from the cover attribute. Cover from the cover slot (wins over cover attribute).

<gk-card cover="/gk-ui/owl.png" title="Cover URL">
  Cover image from the cover attribute.
</gk-card>
<gk-card title="Cover slot">
  <img slot="cover" src="/gk-ui/owl.png" alt="Owl" style="width:100%;max-height:180px;object-fit:cover;display:block" />
  Cover from the cover slot (wins over cover attribute).
</gk-card>

Size

Density via sm, md (default), and lg.

Compact padding and title.Default size.Roomier padding and title.

<gk-card size="sm" title="Small">Compact padding and title.</gk-card>
<gk-card size="md" title="Medium">Default size.</gk-card>
<gk-card size="lg" title="Large">Roomier padding and title.</gk-card>

Hoverable

Enable hoverable for a soft shadow and slight translate on hover.

Hover for a subtle elevation nudge.

<gk-card title="Hoverable" hoverable>
  Hover for a subtle elevation nudge.
</gk-card>

Segmented

segmented adds dividers between header, content, and footer when those regions exist.

Main content between header and footer.

Footer region

<gk-card title="Segmented" segmented>
  Main content between header and footer.
  <div slot="footer">Footer region</div>
</gk-card>

Closable

closable dispatches bubbling gk-close; the card does not hide itself. Here the host hides the card and shows a closable gk-alert.

Close this card to reveal an alert.

<!-- host:
const cardVisible = ref(true);
const alertVisible = ref(false);
function onCardClose() {
  cardVisible.value = false;
  alertVisible.value = true;
}
function onAlertClose() {
  alertVisible.value = false;
}
-->
<gk-card v-if="cardVisible" title="Closable" closable @gk-close="onCardClose">
  Close this card to reveal an alert.
</gk-card>
<gk-alert
  v-if="alertVisible"
  type="success"
  title="Card closed"
  closable
  @gk-close="onAlertClose"
>
  The card emitted gk-close; the host hid it and showed this alert.
</gk-alert>

API

Card Props

Prop	Type	Default
title	string	—
size	'sm' | 'md' | 'lg'	'md'
cover	string	—
hoverable	boolean	false
bordered	boolean	true
segmented	boolean	false
closable	boolean	false

Card Slots

Name	Description
cover	Custom cover (wins over cover attribute)
header	Custom header (wins over title attribute)
default	Main content
footer	Footer region
action	Top-right actions (beside close when both present)

Card Events

Name	Description
gk-close	Close button activated; bubbles; composed: true

CSS Parts

Part	Description
base	Outer article surface
cover	Cover region
header	Header row
content	Main content wrapper
footer	Footer region
action	Action area (slot + close)
close	Close button