# Card


## Examples

### Default

```html
<m-card role=${ifDefined(args.role)}>
      <h3 slot="header">Card Title</h3>
      <m-tag slot="header-end" variant="success">Active</m-tag>
      <p>This is the card body content. You can place any content here.</p>
      <m-button slot="footer" size="s">Action</m-button>
    </m-card>
```

### MinimalWithBodyOnly

```html
<m-card>
      <p>This card only has body content, no header or footer.</p>
      <p>The header and footer sections are automatically hidden when empty.</p>
    </m-card>
```

### WithDescriptionList

```html
<m-card>
      <h3 slot="header">Contact Information</h3>
      <m-tag slot="header-end" variant="success" icon="check">Verified</m-tag>
      <m-description-list labelHidden>
        <dt>Name</dt>
        <dd>John Doe</dd>
        <dt>Email</dt>
        <dd>john.doe@example.com</dd>
        <dt>Phone</dt>
        <dd>+1 (234) 567-890</dd>
      </m-description-list>
      <m-button slot="footer" size="s">Edit Contact</m-button>
    </m-card>
```

### WithComplexFooter

```html
<m-card>
      <h3 slot="header">Manager Reference</h3>
      <m-tag slot="header-end" variant="danger">Email not delivered</m-tag>
      <m-description-list labelHidden>
        <dt>Name</dt>
        <dd>Jane Smith</dd>
        <dt>Email</dt>
        <dd>jane.smith@example.com</dd>
        <dt>Phone</dt>
        <dd>+1 (234) 567-891</dd>
      </m-description-list>
      <div slot="footer" style="display: flex; flex-direction: column; gap: var(--m-space-s); width: 100%;">
        <div
          style="background-color: var(--m-color-bg-feedback-informative); padding: var(--m-space-s); border-radius: var(--m-border-radius-s);">
          <p
            >The e-mail invitation failed to deliver. Check if the reference's e-mail address is correct or invite a new
            reference.</p
          >
          <m-button-group alignment="left">
            <m-button variant="default" size="l">Invite new reference</m-button>
            <m-button variant="primary" size="l">Edit reference</m-button>
          </m-button-group>
        </div>
      </div>
    </m-card>
```

## Usage

**Use Card to:**

- Display related information in a structured, scannable format.
- Present content with a clear hierarchy (header, body, footer).
- Show status or metadata in the header alongside the title.
- Provide actions related to the card content in the footer.
- Create consistent layouts for lists of similar items (e.g., references, contacts, tasks).
- Ensure accessibility with proper ARIA roles and semantic structure.

**Do not use Card to:**

- Create complex nested layouts that should be handled by specialized components.
- Apply arbitrary styling that deviates from the design system's card patterns.

## Slots

The Card component provides four slots for flexible content organization:

- **header**: Main header content, typically a heading element (h2, h3, etc.)
- **header-end**: Secondary header content, typically status badges or tags
- **default**: Main body content (unnamed slot)
- **footer**: Footer content, typically actions or additional information

## Accessibility

- The Card has a default ARIA role of "article" which can be customized via the `role` attribute.
- Use appropriate heading levels (h2, h3, etc.) in the header slot to maintain document outline.
- Ensure status tags in the header-end slot have proper ARIA labels when status is critical information.
- When cards are used in lists, consider using proper list markup (`<ul>`, `<li>`) and ARIA attributes for better screen reader support.

## Other Considerations

- **Header**: Automatically hidden when both header and header-end slots are empty.
- **Footer**: Automatically hidden when the footer slot is empty.
- **Content Spacing**: The card automatically provides consistent spacing between sections (header, body, footer).
- **Responsive Behavior**: The card adapts to its container width and allows content to flow naturally.

## Design Rationale

- **Separation of Concerns**: The Card component handles structure and layout, while content styling remains the responsibility of child components.
- **Semantic Structure**: The use of semantic HTML elements (header, footer) within the card improves accessibility and maintainability.
- **Flexible Layout**: Named slots provide clear content areas while maintaining flexibility for various use cases.
- **Consistent Spacing**: Built-in spacing between sections ensures visual consistency across different card instances.
- **Conditional Rendering**: Empty sections are automatically hidden to prevent unnecessary visual clutter.
- **Progressive Enhancement**: The card works well with or without borders, adapting to different design contexts.