GrCard

<GrCard> with no props renders a single <div> with a slot inside: no wrappers, no padding. This is not caution for the sake of caution — GrCollapse and GrList stand on GrCard, and a shifted default would move under them. Hence padding="none" by default.

<GrCard padding="md">
…
</GrCard>

none (the default), sm (12px), md (16px), lg (24px). While there are no sections, the padding lives on the surface itself — no extra wrapper appears.

padding and variant are read from GrConfigProvider:

<GrConfigProvider :component-defaults="{ GrCard: { padding: 'md', variant: 'outlined' } }">

<GrCard padding="md">
  <template #header>
    <h3>Release 0.15</h3>
  </template>

  The body of the card.

  <template #footer>
    <GrButton size="sm">Publish</GrButton>
  </template>
</GrCard>

The header is separated with border-b, the footer with border-t. As soon as at least one section appears (or bodyClass), the padding moves from the surface to the sections — otherwise it would double up.

The card separates what it draws itself. A header made from title is its own, and padding is due to it regardless of padding, including the default none: otherwise the heading and the divider under it end up pressed against the border. This is exactly the typical report card — a heading with padding, a table edge to edge:

<GrCard title="Documents" variant="outlined">
  <GrDataTable :rows="rows" :columns="columns" />
</GrCard>

The #header and #footer slots are filled by the consumer — their padding comes from padding and remains their concern. The rule is the same as the priority rule: #header is stronger than the props and replaces the header as a whole, and the responsibility for padding along with it. Otherwise a consumer with padding of their own inside the slot would get it twice over.

bodyClass puts classes on the wrapper of the body — the very place where grid gap-* is usually needed.

<GrCard title="Revenue for the month" description="Excluding refunds" padding="md">
  <RevenueChart />
</GrCard>

title is printed with an h2…h6 tag (headingLevel, h3 by default) rather than as <span class="font-semibold">. The difference is not cosmetic: a page of six cards where there is not a single heading after the h1 is walked by a screen reader in sequence only — there is nothing to jump between blocks by.

#header is stronger than the props: if the slot is taken, title and description are not rendered at all. A non-standard header does not have to explain why it is not title.

An action beside the heading is the #actions slot, and the header stays its own: the heading is printed with the same h2…h6, the padding comes from the scale of the card.

<GrCard title="Sales for the week" :heading-level="3">
  <template #actions>
    <GrButton size="xs" variant="ghost">Refresh</GrButton>
  </template>
</GrCard>

The slot did not appear for the sake of convenience: there was no third case — either a heading from the props, or #header as a whole — and any button in the header forced you to take over the slot and rewrite the heading by hand. GrDashboardItem in the ring and the wrappers of consumers arrived at that workaround independently, and all of them lost the same things: the real heading level and the padding scale.

The slot does not combine with #header: that one replaces the header as a whole, including the place the actions would take. GrDashboardItem still uses #header — it has a drag handle to the left of the heading, and #actions does not express that.

A card-link takes its accessible name from the heading (aria-labelledby) rather than from all of the content in a row.

A clickable card will not have a heading. Its root is a <button>, and its content model is phrasing content: an <h3> inside is invalid. title is printed as a <span>, and in dev the component warns about it. If both a heading and a transition are needed — hoverable plus a link in the heading itself; this is the same device as with actions inside (below).

<GrCard href="/reports/42" padding="md">
…
</GrCard>

<GrCard clickable padding="md" @click="open">
…
</GrCard>

<GrCard :as="RouterLink" :to="{ name: 'report' }" padding="md">
…
</GrCard>

The order in which the tag is chosen is as → <a href> → <button clickable> → <div>, as in GrLink and GrListItem. An interactive card gets a focus ring and a highlight on hover.

Interactivity comes from an allowed tag, not from the mere fact of as. The focus ring goes to whoever can take focus: a <button>, an <a> with a link and a router component, about which all that is known before rendering is that it renders an <a>. as="section" does not make the card interactive — see below.

A restriction: buttons and links must not be put inside a clickable card — interactive inside interactive breaks both the keyboard and the screen reader (axe: nested-interactive). A card with actions inside needs hoverable plus a link in the heading — visually it is the same thing, semantically it is correct.

hoverable highlights the card without making it interactive.

A page on which a block has to be a <section> or an <article> by the markup of the document takes as with a string tag:

<GrCard as="section" title="Sales" padding="md">
…
</GrCard>

Only the tag changes. The classes, the padding, the heading and the slots are the same as with a <div>: a non-interactive tag gets neither a highlight under the cursor, nor a focus ring, nor aria-labelledby. The card stays a surface, and the markup of the page becomes honest.

<div> stays the default on purpose. The HTML spec advises against section where the element is needed for styling, and a card is most often exactly a surface — GrCollapse, GrList and GrSortableList stand on it in precisely that capacity. The tag is chosen by the page, which knows its structure, not by the component.

The other side of the rule: clickable or href together with a tag that does not enter the tab order is a markup error. The card will be clickable with the mouse and stay unreachable from the keyboard, and in dev the component warns about it.

A nameless <section> is an ordinary container to a screen reader, and that is the norm. A name turns it into a landmark, and a page needs few named regions: a dozen region cards make their overview useless. That is why a name is given on explicit request — regionLabel:

<GrCard as="section" region-label="Sales for August" title="Sales" padding="md">
…
</GrCard>

The prop sets role="region" and aria-label — the same device as in GrTable and GrFormSection. An interactive card is not given it, and in dev it warns: role="region" on top of a <button> is invalid, and a link has already been named by its heading.