A flexible container component that organizes content into distinct sections: header, body, and footer. Cards are ideal...

A flexible container component that organizes content into distinct sections: header, body, and footer. Cards are ideal for grouping related information, creating visual blocks on a page, and building modular layouts. They support optional header and footer slots for flexible composition. Use cards to: - Group related content together - Create visual separation between sections - Build product/service listings, feature blocks, or data displays - Compose complex layouts with reusable card components Composition: - The default slot contains the main body content - Use `slot="header"` for optional header content (e.g., titles, icons) - Use `slot="footer"` for optional footer content (e.g., actions, metadata) The `bare` variant removes border and padding for custom styling. The `center` align variant centers card content for decorative or feature-focused layouts.

<ed-card></ed-card>

Properties

Name Type Default Description
variant String 'bare' A flexible container component that organizes content into distinct sections: header, body, and footer. Cards are ideal for grouping related information, creating visual blocks on a page, and building modular layouts. They support optional header and footer slots for flexible composition. Use cards to: - Group related content together - Create visual separation between sections - Build product/service listings, feature blocks, or data displays - Compose complex layouts with reusable card components Composition: - The default slot contains the main body content - Use `slot="header"` for optional header content (e.g., titles, icons) - Use `slot="footer"` for optional footer content (e.g., actions, metadata) The `bare` variant removes border and padding for custom styling. The `center` align variant centers card content for decorative or feature-focused layouts. / export class EdCard extends EdElement { static get styles() { return unsafeCSS(styles); } /** Style variants <ed-text-passage size="sm"> <ul> <li>**bare** Removes border and padding for custom card layouts or when cards are nested inside other containers</li> </ul> </ed-text-passage>
align String 'center' Align variants <ed-text-passage size="sm"> <ul> <li>**center** renders a card that has center aligned content/text</li> </ul> </ed-text-passage>

Slots

Name Description
- The card body content
header Optional header content appearing above the body
footer Optional footer content appearing below the body

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/card/card.ts