The m3e-card component is a flexible, expressive container for presenting a unified subject—text, media, and actions—on a visually distinct surface.

npm i @m3e/card

This section outlines usage examples and configuration guidance for the components in this package.

The m3e-card component provides a modular layout for structured content blocks. It exposes the following named slots:

• header — Renders the header region of the card. Typically used for titles, icons, or introductory context.
• content — Renders the padded content region. Ideal for body text, form fields, or structured information.
• actions — Renders the action region. Use for buttons, toggles, or interactive controls aligned to the card's intent.
• footer — Renders the footer region. Suitable for metadata, disclaimers, or secondary actions.
• (default) — Renders the default content of the card without padding. Use for full-bleed layouts or custom compositions.

<m3e-card>
  <m3e-heading slot="header" variant="display" size="small">Card Header</m3e-heading>
  <div slot="content">Card Content</div>
  <div slot="actions">
    <m3e-button variant="filled">Action</m3e-button>
  </div>
  <div slot="footer">Card Footer</div>
</m3e-card>

You can change the horizontal alignment of the actions slot by adding an end attribute to the slotted element.

<m3e-card>
  <m3e-heading slot="header" variant="display" size="small">Card Header</m3e-heading>
  <div slot="content">Card Content</div>
  <div slot="actions" end>
    <m3e-button variant="filled">Action</m3e-button>
  </div>
</m3e-card>

When using the default slot, the m3e-card will not add any padding.

<m3e-card>Card content</m3e-card>

There are three card appearance variants: filled (default), outlined, and elevated. Use the variant attribute to control a card's appearance.

<m3e-card variant="filled">
  <div slot="content">Filled</div>
</m3e-card>
<!-- Additional variants omitted for brevity -->

By default, cards are rendered as block-level elements. Use the inline attribute to make a card render inline with surrounding content.

<m3e-card inline>
  <div slot="content">Inline</div>
</m3e-card>

By default, cards are oriented vertically. Use the orientation attribute to change the orientation to horizontal or vertically (default).

Horizontal

<m3e-card class="image-card" inline orientation="horizontal">
  <img slot="header" src="[YOUR IMAGE URL HERE]" />
  <div slot="content">Horizontal</div>
</m3e-card>

Use the actionable attribute to configure a card as an actionable surface, allowing users to interact with the entire card as a single affordance. This pattern is ideal for navigation, selection, or triggering contextual behavior.

<m3e-card variant="filled" actionable>
  <div slot="content">Filled</div>
</m3e-card>
<!-- Additional variants omitted for brevity -->

Use the disabled attribute to disable an actionable card. By default, disabled cards are not focusable with the keyboard. You can use the disabled-interactive attribute to support focusability of disabled controls to increase their discoverability.

<m3e-card variant="filled" actionable disabled>
  <div slot="content">Disabled</div>
</m3e-card>
<br />
<m3e-card variant="filled" actionable disabled-interactive>
  <div slot="content">Disabled Interactive</div>
</m3e-card>

Actionable cards can also behave like links by specifying a URL using the href attribute. You can also specify target, rel and download similar to native anchor tags.

<m3e-card actionable href="https://www.google.com" target="_blank">
  <div slot="content">Google</div>
</m3e-card>

By default, cards are not given an ARIA role, indicating that they are treated as neutral, non-semantic elements in the accessibility tree unless explicitly referenced or annotated.

Actionable cards are given ARIA role="button" indicating they are clickable elements that trigger actions.

When disabling using either the disabled or disabled-interactive attribute, aria-disabled="true" is used to convey to assistive technologies that the actionable card is disabled. If disabled using disabled-interactive, tabindex is retained to convey that the card continues to be interactive.

When href is specified, the ARIA role link is used instead of button to convey the actionable card provides an interactive reference to a resource. In addition, the component presents an internal anchor, hidden from assistive technologies, used to invoke native browser features such a context menu options and tooltips.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/card/dist/index.js"></script>

In addition, you must use an import map to include additional dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
    }
  }
</script>

For production, use index.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.