Cards

import { Card } from '@kyralabs/m3exp-web/react';

const VARIANTS = [
  ['elevated', 'Elevated'],
  ['filled', 'Filled'],
  ['outlined', 'Outlined'],
] as const;

export default function Variants() {
  return (
    <>
      {VARIANTS.map(([variant, title]) => (
        <Card
          key={variant}
          variant={variant}
          as="article"
          style={{ padding: 'var(--m3e-sys-space-200)' }}
        >
          <h4>{title}</h4>
          <p>Content and actions about one subject.</p>
        </Card>
      ))}
    </>
  );
}

<article class="m3e-card m3e-card--elevated" style="padding: var(--m3e-sys-space-200)">
  <h4>Elevated</h4>
  <p>Content and actions about one subject.</p>
</article>
<article class="m3e-card m3e-card--filled" style="padding: var(--m3e-sys-space-200)">
  <h4>Filled</h4>
  <p>Content and actions about one subject.</p>
</article>
<article class="m3e-card m3e-card--outlined" style="padding: var(--m3e-sys-space-200)">
  <h4>Outlined</h4>
  <p>Content and actions about one subject.</p>
</article>

import { Button, Card, CardAction } from '@kyralabs/m3exp-web/react';

export default function Interactive() {
  return (
    <Card variant="outlined" as="article" style={{ padding: 'var(--m3e-sys-space-200)' }}>
      <h4>
        <CardAction href="/components/card/">Glacier hike</CardAction>
      </h4>
      <p>The whole card is the link. Other controls stay clickable above it.</p>
      <Button variant="tonal" size="xs">
        Save
      </Button>
    </Card>
  );
}

<article
  class="m3e-card m3e-card--outlined m3e-card--interactive"
  style="padding: var(--m3e-sys-space-200)"
>
  <h4><a class="m3e-card__action" href="/components/card/">Glacier hike</a></h4>
  <p>The whole card is the link. Other controls stay clickable above it.</p>
  <button type="button" class="m3e-button m3e-button--tonal m3e-button--size-xs">Save</button>
</article>