Card

# Aster Component Implementation Prompt — Card

## 1. Component Purpose & Canonical Role
- **Component:** Card (`card`)
- **Category:** Data Display
- **Native Element:** `<article>`
- **Summary:** A raised container for related content, with an optional clickable version.
- **When to Use:** Grouping related content, such as a summary with its actions.
- **When Not to Use:** Page layout, or a single line of text.

## 2. Authoritative Repository Files
- **Component CSS:** `components/card/card.css`
- **Component Spec:** `docs/components/card.md`
- **Agent Contract:** `skills/using-aster-components/SKILL.md`
- **Compiled Bundle:** `dist/css/aster.css`

## 3. Canonical HTML Structure & Classes
```html
<article class="as-card">
  <header class="as-card__header">
    <h3 class="as-card__title">Production Cluster</h3>
    <p class="as-card__description">Three nodes in eu-west-1.</p>
  </header>
  <p class="as-card__body">All workloads are healthy and scheduled.</p>
  <footer class="as-card__footer">
    <button type="button" class="as-button as-button--secondary"><span class="as-button__label">View Details</span></button>
  </footer>
</article>
```

## 4. Measured Geometry
Measured from the rendered component when this page loads.

## 5. Non-Negotiable Aster Constraints
1. Bind colors to `--as-semantic-color-*` tokens, never primitives or hex values.
2. Use the radius tokens, with 4px as the smallest component radius.
3. Aster has one standard density, with no compact mode.
4. Keep text at 4.5:1 contrast and interactive elements keyboard operable.

## 6. Verification Commands
```bash
npm run test:components
npm run test:browser
```