Card

/**
 * One entry per configuration the Card spec draws (emphasis, size, structure,
 * state, link). The demos in every framework render this same list, so the
 * docs page shows the identical gallery whichever tab you are on.
 *
 * Slot content is a plain string, not a node: this package is framework-neutral
 * and each adapter wraps it in its own markup.
 */
interface CardVariantFixture {
  readonly id: string;
  /** Caption above the specimen. */
  readonly label: string;
  readonly framed?: boolean;
  readonly emphasis?: "outlined" | "elevated" | "filled" | "dashed";
  readonly size?: "compact" | "default" | "spacious";
  readonly orientation?: "vertical" | "horizontal";
  readonly accent?: boolean;
  /** Placeholder caption for the media slot. */
  readonly media?: string;
  readonly header?: string;
  readonly footer?: string;
  readonly interactive?: boolean;
  readonly selected?: boolean;
  readonly disabled?: boolean;
  readonly loading?: boolean;
  readonly href?: string;
}
 
const cardFixture = {
  id: "card",
  eyebrow: "Service status",
  title: "ledger-api",
  body: "All health checks are passing.",
  framed: false,
  variants: [
    { id: "outlined", label: "outlined — default" },
    { id: "framed", label: "framed", framed: true },
    { id: "elevated", label: "elevated", emphasis: "elevated" },
    { id: "filled", label: "filled", emphasis: "filled" },
    { id: "dashed", label: "dashed", emphasis: "dashed" },
    { id: "accent", label: "accent bar", accent: true },
    { id: "compact", label: "compact", size: "compact" },
    { id: "spacious", label: "spacious", size: "spacious" },
    { id: "header", label: "header", header: "eu-west-1" },
    { id: "footer", label: "footer", footer: "checked 30s ago" },
    { id: "media", label: "media top", media: "[ latency chart ]" },
    { id: "horizontal", label: "horizontal", orientation: "horizontal", media: "[ 1:1 ]" },
    { id: "interactive", label: "interactive — hover me", interactive: true },
    { id: "selected", label: "selected", interactive: true, selected: true },
    { id: "disabled", label: "disabled", interactive: true, disabled: true },
    { id: "loading", label: "loading", loading: true },
    { id: "link", label: "link — whole card", href: "#card-link" },
  ],
} satisfies {
  id: string;
  eyebrow: string;
  title: string;
  body: string;
  framed: boolean;
  variants: readonly CardVariantFixture[];
};
 
import { Card } from "@grassroot/ui-react";
 
const GRID = {
  display: "grid",
  gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
  gap: "22px 18px",
  alignItems: "start",
} as const;
const CELL = { display: "grid", gap: "8px", alignContent: "start" } as const;
const CAPTION = {
  fontFamily: "var(--font-mono)",
  fontSize: "11px",
  letterSpacing: ".08em",
  textTransform: "uppercase",
  color: "var(--text-muted)",
} as const;
const MEDIA = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  minHeight: "86px",
  height: "100%",
  fontFamily: "var(--font-mono)",
  fontSize: "10px",
  color: "var(--text-muted)",
} as const;
 
export default function CardDemo() {
  return (
    <div style={GRID}>
      {cardFixture.variants.map((variant) => (
        <div key={variant.id} style={CELL}>
          <span style={CAPTION}>{variant.label}</span>
          <Card
            eyebrow={variant.header || variant.media ? undefined : cardFixture.eyebrow}
            title={cardFixture.title}
            description={cardFixture.body}
            framed={variant.framed}
            emphasis={variant.emphasis}
            size={variant.size}
            orientation={variant.orientation}
            accent={variant.accent}
            interactive={variant.interactive}
            selected={variant.selected}
            disabled={variant.disabled}
            loading={variant.loading}
            href={variant.href}
            media={variant.media ? <div style={MEDIA}>{variant.media}</div> : undefined}
            header={variant.header}
            footer={variant.footer}
          />
        </div>
      ))}
    </div>
  );
}

<script setup lang="ts">
/**
 * One entry per configuration the Card spec draws (emphasis, size, structure,
 * state, link). The demos in every framework render this same list, so the
 * docs page shows the identical gallery whichever tab you are on.
 *
 * Slot content is a plain string, not a node: this package is framework-neutral
 * and each adapter wraps it in its own markup.
 */
interface CardVariantFixture {
  readonly id: string;
  /** Caption above the specimen. */
  readonly label: string;
  readonly framed?: boolean;
  readonly emphasis?: "outlined" | "elevated" | "filled" | "dashed";
  readonly size?: "compact" | "default" | "spacious";
  readonly orientation?: "vertical" | "horizontal";
  readonly accent?: boolean;
  /** Placeholder caption for the media slot. */
  readonly media?: string;
  readonly header?: string;
  readonly footer?: string;
  readonly interactive?: boolean;
  readonly selected?: boolean;
  readonly disabled?: boolean;
  readonly loading?: boolean;
  readonly href?: string;
}
 
const cardFixture = {
  id: "card",
  eyebrow: "Service status",
  title: "ledger-api",
  body: "All health checks are passing.",
  framed: false,
  variants: [
    { id: "outlined", label: "outlined — default" },
    { id: "framed", label: "framed", framed: true },
    { id: "elevated", label: "elevated", emphasis: "elevated" },
    { id: "filled", label: "filled", emphasis: "filled" },
    { id: "dashed", label: "dashed", emphasis: "dashed" },
    { id: "accent", label: "accent bar", accent: true },
    { id: "compact", label: "compact", size: "compact" },
    { id: "spacious", label: "spacious", size: "spacious" },
    { id: "header", label: "header", header: "eu-west-1" },
    { id: "footer", label: "footer", footer: "checked 30s ago" },
    { id: "media", label: "media top", media: "[ latency chart ]" },
    { id: "horizontal", label: "horizontal", orientation: "horizontal", media: "[ 1:1 ]" },
    { id: "interactive", label: "interactive — hover me", interactive: true },
    { id: "selected", label: "selected", interactive: true, selected: true },
    { id: "disabled", label: "disabled", interactive: true, disabled: true },
    { id: "loading", label: "loading", loading: true },
    { id: "link", label: "link — whole card", href: "#card-link" },
  ],
} satisfies {
  id: string;
  eyebrow: string;
  title: string;
  body: string;
  framed: boolean;
  variants: readonly CardVariantFixture[];
};
 
import { Card } from "@grassroot/ui-vue";
 
const GRID =
  "display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;align-items:start";
const CELL = "display:grid;gap:8px;align-content:start";
const CAPTION =
  "font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)";
const MEDIA =
  "display:flex;align-items:center;justify-content:center;min-height:86px;height:100%;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)";
</script>
 
<template>
  <div :style="GRID">
    <div v-for="variant in cardFixture.variants" :key="variant.id" :style="CELL">
      <span :style="CAPTION">{{ variant.label }}</span>
      <Card
        :eyebrow="variant.header || variant.media ? undefined : cardFixture.eyebrow"
        :title="cardFixture.title"
        :description="cardFixture.body"
        :framed="variant.framed"
        :emphasis="variant.emphasis"
        :size="variant.size"
        :orientation="variant.orientation"
        :accent="variant.accent"
        :interactive="variant.interactive"
        :selected="variant.selected"
        :disabled="variant.disabled"
        :loading="variant.loading"
        :href="variant.href"
      >
        <template v-if="variant.media" #media
          ><div :style="MEDIA">{{ variant.media }}</div></template
        >
        <template v-if="variant.header" #header>{{ variant.header }}</template>
        <template v-if="variant.footer" #footer>{{ variant.footer }}</template>
      </Card>
    </div>
  </div>
</template>

import { Component } from "@angular/core";
/**
 * One entry per configuration the Card spec draws (emphasis, size, structure,
 * state, link). The demos in every framework render this same list, so the
 * docs page shows the identical gallery whichever tab you are on.
 *
 * Slot content is a plain string, not a node: this package is framework-neutral
 * and each adapter wraps it in its own markup.
 */
interface CardVariantFixture {
  readonly id: string;
  /** Caption above the specimen. */
  readonly label: string;
  readonly framed?: boolean;
  readonly emphasis?: "outlined" | "elevated" | "filled" | "dashed";
  readonly size?: "compact" | "default" | "spacious";
  readonly orientation?: "vertical" | "horizontal";
  readonly accent?: boolean;
  /** Placeholder caption for the media slot. */
  readonly media?: string;
  readonly header?: string;
  readonly footer?: string;
  readonly interactive?: boolean;
  readonly selected?: boolean;
  readonly disabled?: boolean;
  readonly loading?: boolean;
  readonly href?: string;
}
 
const cardFixture = {
  id: "card",
  eyebrow: "Service status",
  title: "ledger-api",
  body: "All health checks are passing.",
  framed: false,
  variants: [
    { id: "outlined", label: "outlined — default" },
    { id: "framed", label: "framed", framed: true },
    { id: "elevated", label: "elevated", emphasis: "elevated" },
    { id: "filled", label: "filled", emphasis: "filled" },
    { id: "dashed", label: "dashed", emphasis: "dashed" },
    { id: "accent", label: "accent bar", accent: true },
    { id: "compact", label: "compact", size: "compact" },
    { id: "spacious", label: "spacious", size: "spacious" },
    { id: "header", label: "header", header: "eu-west-1" },
    { id: "footer", label: "footer", footer: "checked 30s ago" },
    { id: "media", label: "media top", media: "[ latency chart ]" },
    { id: "horizontal", label: "horizontal", orientation: "horizontal", media: "[ 1:1 ]" },
    { id: "interactive", label: "interactive — hover me", interactive: true },
    { id: "selected", label: "selected", interactive: true, selected: true },
    { id: "disabled", label: "disabled", interactive: true, disabled: true },
    { id: "loading", label: "loading", loading: true },
    { id: "link", label: "link — whole card", href: "#card-link" },
  ],
} satisfies {
  id: string;
  eyebrow: string;
  title: string;
  body: string;
  framed: boolean;
  variants: readonly CardVariantFixture[];
};
 
import {
  GrassrootCard,
  GrassrootCardFooter,
  GrassrootCardHeader,
  GrassrootCardMedia,
} from "@grassroot/ui-angular";
 
@Component({
  selector: "app-card-demo",
  standalone: true,
  imports: [GrassrootCard, GrassrootCardMedia, GrassrootCardHeader, GrassrootCardFooter],
  template: `
    <div
      style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;align-items:start"
    >
      @for (variant of variants; track variant.id) {
        <div style="display:grid;gap:8px;align-content:start">
          <span
            style="font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)"
            >{{ variant.label }}</span
          >
          <grassroot-card
            [eyebrow]="variant.header || variant.media ? undefined : fixture.eyebrow"
            [title]="fixture.title"
            [description]="fixture.body"
            [framed]="!!variant.framed"
            [emphasis]="variant.emphasis"
            [size]="variant.size ?? 'default'"
            [orientation]="variant.orientation"
            [accent]="!!variant.accent"
            [interactive]="variant.interactive"
            [selected]="variant.selected"
            [disabled]="variant.disabled"
            [loading]="variant.loading"
          >
            @if (variant.media) {
              <div
                grassrootCardMedia
                style="display:flex;align-items:center;justify-content:center;min-height:86px;height:100%;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)"
              >
                {{ variant.media }}
              </div>
            }
            @if (variant.header) {
              <div grassrootCardHeader>{{ variant.header }}</div>
            }
            @if (variant.footer) {
              <div grassrootCardFooter>{{ variant.footer }}</div>
            }
          </grassroot-card>
        </div>
      }
    </div>
  `,
})
export class CardDemoComponent {
  protected readonly fixture = cardFixture;
  /**
   * The whole-card link has no `<grassroot-card>` form — a custom element
   * cannot be an anchor (recorded in contracts/divergences.json). Angular
   * consumers write `<a grCardRoot [href]="…">` with the same
   * `cardRootClass({ interactive: true })`, so there is nothing for this
   * gallery to render.
   */
  protected readonly variants = cardFixture.variants.filter((variant) => !variant.href);
}
 
export default CardDemoComponent;

<script lang="ts">
  /**
   * One entry per configuration the Card spec draws (emphasis, size, structure,
   * state, link). The demos in every framework render this same list, so the
   * docs page shows the identical gallery whichever tab you are on.
   *
   * Slot content is a plain string, not a node: this package is framework-neutral
   * and each adapter wraps it in its own markup.
   */
  interface CardVariantFixture {
    readonly id: string;
    /** Caption above the specimen. */
    readonly label: string;
    readonly framed?: boolean;
    readonly emphasis?: "outlined" | "elevated" | "filled" | "dashed";
    readonly size?: "compact" | "default" | "spacious";
    readonly orientation?: "vertical" | "horizontal";
    readonly accent?: boolean;
    /** Placeholder caption for the media slot. */
    readonly media?: string;
    readonly header?: string;
    readonly footer?: string;
    readonly interactive?: boolean;
    readonly selected?: boolean;
    readonly disabled?: boolean;
    readonly loading?: boolean;
    readonly href?: string;
  }
 
  const cardFixture = {
    id: "card",
    eyebrow: "Service status",
    title: "ledger-api",
    body: "All health checks are passing.",
    framed: false,
    variants: [
      { id: "outlined", label: "outlined — default" },
      { id: "framed", label: "framed", framed: true },
      { id: "elevated", label: "elevated", emphasis: "elevated" },
      { id: "filled", label: "filled", emphasis: "filled" },
      { id: "dashed", label: "dashed", emphasis: "dashed" },
      { id: "accent", label: "accent bar", accent: true },
      { id: "compact", label: "compact", size: "compact" },
      { id: "spacious", label: "spacious", size: "spacious" },
      { id: "header", label: "header", header: "eu-west-1" },
      { id: "footer", label: "footer", footer: "checked 30s ago" },
      { id: "media", label: "media top", media: "[ latency chart ]" },
      { id: "horizontal", label: "horizontal", orientation: "horizontal", media: "[ 1:1 ]" },
      { id: "interactive", label: "interactive — hover me", interactive: true },
      { id: "selected", label: "selected", interactive: true, selected: true },
      { id: "disabled", label: "disabled", interactive: true, disabled: true },
      { id: "loading", label: "loading", loading: true },
      { id: "link", label: "link — whole card", href: "#card-link" },
    ],
  } satisfies {
    id: string;
    eyebrow: string;
    title: string;
    body: string;
    framed: boolean;
    variants: readonly CardVariantFixture[];
  };
 
  import { Card } from "@grassroot/ui-svelte";
 
  const GRID =
    "display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;align-items:start";
  const CELL = "display:grid;gap:8px;align-content:start";
  const CAPTION =
    "font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)";
  const MEDIA =
    "display:flex;align-items:center;justify-content:center;min-height:86px;height:100%;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)";
</script>
 
<div style={GRID}>
  {#each cardFixture.variants as variant (variant.id)}
    {#snippet mediaSlot()}<div style={MEDIA}>{variant.media}</div>{/snippet}
    {#snippet headerSlot()}{variant.header}{/snippet}
    {#snippet footerSlot()}{variant.footer}{/snippet}
    <div style={CELL}>
      <span style={CAPTION}>{variant.label}</span>
      <Card
        eyebrow={variant.header || variant.media ? undefined : cardFixture.eyebrow}
        title={cardFixture.title}
        description={cardFixture.body}
        framed={variant.framed}
        emphasis={variant.emphasis}
        size={variant.size}
        orientation={variant.orientation}
        accent={variant.accent}
        interactive={variant.interactive}
        selected={variant.selected}
        disabled={variant.disabled}
        loading={variant.loading}
        href={variant.href}
        media={variant.media ? mediaSlot : undefined}
        header={variant.header ? headerSlot : undefined}
        footer={variant.footer ? footerSlot : undefined}
      />
    </div>
  {/each}
</div>

/** @jsxImportSource solid-js */
import { For } from "solid-js";
/**
 * One entry per configuration the Card spec draws (emphasis, size, structure,
 * state, link). The demos in every framework render this same list, so the
 * docs page shows the identical gallery whichever tab you are on.
 *
 * Slot content is a plain string, not a node: this package is framework-neutral
 * and each adapter wraps it in its own markup.
 */
interface CardVariantFixture {
  readonly id: string;
  /** Caption above the specimen. */
  readonly label: string;
  readonly framed?: boolean;
  readonly emphasis?: "outlined" | "elevated" | "filled" | "dashed";
  readonly size?: "compact" | "default" | "spacious";
  readonly orientation?: "vertical" | "horizontal";
  readonly accent?: boolean;
  /** Placeholder caption for the media slot. */
  readonly media?: string;
  readonly header?: string;
  readonly footer?: string;
  readonly interactive?: boolean;
  readonly selected?: boolean;
  readonly disabled?: boolean;
  readonly loading?: boolean;
  readonly href?: string;
}
 
const cardFixture = {
  id: "card",
  eyebrow: "Service status",
  title: "ledger-api",
  body: "All health checks are passing.",
  framed: false,
  variants: [
    { id: "outlined", label: "outlined — default" },
    { id: "framed", label: "framed", framed: true },
    { id: "elevated", label: "elevated", emphasis: "elevated" },
    { id: "filled", label: "filled", emphasis: "filled" },
    { id: "dashed", label: "dashed", emphasis: "dashed" },
    { id: "accent", label: "accent bar", accent: true },
    { id: "compact", label: "compact", size: "compact" },
    { id: "spacious", label: "spacious", size: "spacious" },
    { id: "header", label: "header", header: "eu-west-1" },
    { id: "footer", label: "footer", footer: "checked 30s ago" },
    { id: "media", label: "media top", media: "[ latency chart ]" },
    { id: "horizontal", label: "horizontal", orientation: "horizontal", media: "[ 1:1 ]" },
    { id: "interactive", label: "interactive — hover me", interactive: true },
    { id: "selected", label: "selected", interactive: true, selected: true },
    { id: "disabled", label: "disabled", interactive: true, disabled: true },
    { id: "loading", label: "loading", loading: true },
    { id: "link", label: "link — whole card", href: "#card-link" },
  ],
} satisfies {
  id: string;
  eyebrow: string;
  title: string;
  body: string;
  framed: boolean;
  variants: readonly CardVariantFixture[];
};
 
import { Card } from "@grassroot/ui-solid";
 
const GRID =
  "display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px;align-items:start";
const CELL = "display:grid;gap:8px;align-content:start";
const CAPTION =
  "font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)";
const MEDIA =
  "display:flex;align-items:center;justify-content:center;min-height:86px;height:100%;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)";
 
export default function CardDemo() {
  return (
    <div style={GRID}>
      <For each={cardFixture.variants}>
        {(variant) => (
          <div style={CELL}>
            <span style={CAPTION}>{variant.label}</span>
            <Card
              eyebrow={variant.header || variant.media ? undefined : cardFixture.eyebrow}
              title={cardFixture.title}
              description={cardFixture.body}
              framed={variant.framed}
              emphasis={variant.emphasis}
              size={variant.size}
              orientation={variant.orientation}
              accent={variant.accent}
              interactive={variant.interactive}
              selected={variant.selected}
              disabled={variant.disabled}
              loading={variant.loading}
              href={variant.href}
              media={variant.media ? <div style={MEDIA}>{variant.media}</div> : undefined}
              header={variant.header}
              footer={variant.footer}
            />
          </div>
        )}
      </For>
    </div>
  );
}