Card

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11

import { Card } from "@gunkin/uiify";

export default function Example() {
  return (
    <Card as="article" className="">
      <h2>Release notes</h2>
      <p>A short summary of the latest product changes.</p>
      <a href="#release-notes">Read the release notes</a>
    </Card>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10

@layer components {
  [data-uiify-card] {
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    padding-block: 1rem;
    padding-inline: 1rem;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22

import { Card } from "@gunkin/uiify";

export default function Example() {
  return (
    <Card
      as="article"
      className="
        grid gap-md w-max max-w-[min(28rem,calc(100vw_-_2_*_var(--space-lg)))] p-6 border border-border rounded-xl
        bg-card text-card-foreground shadow-popover [&[popover]:not(:popover-open)]:hidden
        motion-safe:[&[popover]]:[transition:var(--transition-presence)]
        motion-safe:[&[popover]:not(:popover-open)]:opacity-0
        motion-safe:[&[popover]:not(:popover-open)]:[scale:var(--presence-scale)]
        motion-safe:starting:[&[popover]:popover-open]:opacity-0
        motion-safe:starting:[&[popover]:popover-open]:[scale:var(--presence-scale)]
      "
    >
      <h2>Release notes</h2>
      <p>A short summary of the latest product changes.</p>
      <a href="#release-notes">Read the release notes</a>
    </Card>
  );
}