Card 21.6.1

Variants and sizes

The same three variants as gog-panel, from the shared GogSurfaceVariant type — but outlined is the default here, because a grid of many cards wants a border rather than twenty shadows. size drives padding and the row gap on the same five-tier scale as every control.

<div class="variants">
  @for (variant of variants; track variant) {
    <gog-card [variant]="variant">
      <h4 gogCardHeader>{{ variant }}</h4>
      <p>Outlined is the default — a border and no shadow, which is what a grid of many wants.</p>
    </gog-card>
  }
</div>

<div class="sizes">
  @for (size of sizes; track size) {
    <gog-card [size]="size">
      <h4 gogCardHeader>{{ size }}</h4>
      <p>Same copy, every tier.</p>
    </gog-card>
  }
</div>

Interactive — the whole surface activates one real link

There is no interactive input and no gogClick output. A card becomes interactive by containing a gogCardLink, which stretches that link's hit area over the whole surface. The link stays yours, so routerLink, href, target, middle-click, "open in new tab" and Enter all behave normally, and the focus ring is drawn around the card.

Anything else focusable in the card still receives its own clicks — press the footer button and watch the tally, then click anywhere else on the card and follow the link instead.

<div class="grid">
  @for (person of people; track person.id) {
    <gog-card>
      <h4 gogCardHeader>
        <a gogCardLink routerLink="/components/card" [fragment]="person.id">{{ person.name }}</a>
      </h4>
      <p>{{ person.role }}</p>
      <div gogCardFooter>
        <gog-tag variant="info" size="xsm">Profile</gog-tag>
        <gog-button size="xsm" variant="ghost" (gogClick)="shortlist()">Shortlist</gog-button>
      </div>
    </gog-card>
  }
</div>

<p class="tally">
  Footer clicks that reached their own button: <strong>{{ footerClicks() }}</strong>
</p>

Two costs, inherent to the pattern rather than to this implementation: text in the card cannot be selected by dragging, and a second link is reachable by keyboard but not by clicking the surface around it. If either matters, do not stretch the link — put an ordinary link in the heading and leave the surface inert.

gogCardLink applies to <a> and <button> only. On a <div> it does nothing, on purpose: a div with a click handler is the thing this directive exists to stop you writing.

Media

gogCardMedia runs full-bleed to the card's edges and rounds into its top corners. The rendered order of the slots is fixed by the component — media, heading, body, footer — and does not follow the order you write them in: the two cards below are authored in opposite orders and render identically, which is what keeps a grid aligned when one card happens to be written differently from its neighbours.

Media written first

Full-bleed to the card's edges, rounded into its top corners.

Media written last

Authored after the heading and the body — and rendered identically to the card beside it. The component fixes the slot order, so the write order never leaks into the layout.

HTML TS CSS

Copy

<div class="grid">
  <gog-card>
    <img [src]="mediaSrc" gogCardMedia alt="" height="120" />
    <h4 gogCardHeader>Media written first</h4>
    <p>Full-bleed to the card's edges, rounded into its top corners.</p>
  </gog-card>

  <gog-card>
    <h4 gogCardHeader>Media written last</h4>
    <p>
      Authored after the heading and the body — and rendered identically to the card beside it. The
      component fixes the slot order, so the write order never leaks into the layout.
    </p>
    <img [src]="mediaSrc" gogCardMedia alt="" height="120" />
  </gog-card>
</div>

The bleed is inline-size: calc(100% + 2 * padding-x) plus a negative inline margin, so do not give the media a width of your own — a width: 100% overrides that calculation and the picture ends one padding short of the card's right edge while still starting flush at its left.

Loading and disabled

loading swaps the content for a title bar plus skeletonLines body lines and marks the host aria-busy. disabled dims the card, sets aria-disabled, and takes its link out of the tab order. Both make the card's link non-clickable.

loading is the first-paint treatment. For a refresh of a card that already has content, project a gog-spinner-overlay instead — replacing real content with placeholders is a worse answer once the reader has something to look at.

<div class="grid">
  <div class="cell">
    <gog-button size="xsm" variant="outline" (gogClick)="toggleLoading()">
      {{ loading() ? 'Finish loading' : 'Load again' }}
    </gog-button>
    <gog-card [loading]="loading()" [skeletonLines]="3">
      <h4 gogCardHeader>Quarterly summary</h4>
      <p>Revenue is up 12% on the quarter, driven mostly by renewals rather than new business.</p>
    </gog-card>
  </div>

  <div class="cell">
    <gog-button size="xsm" variant="outline" (gogClick)="toggleDisabled()">
      {{ disabled() ? 'Enable' : 'Disable' }}
    </gog-button>
    <gog-card [disabled]="disabled()">
      <h4 gogCardHeader>
        <a gogCardLink routerLink="/components/card">Archived report</a>
      </h4>
      <p>Tab through the pair: only the enabled card's link stops.</p>
    </gog-card>
  </div>
</div>

Theming

Every value comes from a --gog-card-* token, and the instance tier (--gog-card-bg, --gog-card-border-color, --gog-card-shadow, --gog-card-padding-y, --gog-card-padding-x, --gog-card-gap) is left undeclared on purpose, so setting one on an element beats the variant and size classes without a specificity fight.

<gog-card class="themed">
  <h4 gogCardHeader>Overridden per instance</h4>
  <p>Three instance tokens from one class on the element. No <code>::ng-deep</code>.</p>
</gog-card>