StellarUI

<stellar-card>

compositional card with optional media, header, footer, and actions plus simple appearance and orientation props.

Properties

Component

Example

Preview

Ship Faster

Compose previews, docs, and controls without rebuilding the shell every time.

Browse

Updated 2 minutes ago

Markup

Copy

<stellar-card>
  <img slot="media" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="" />
  <strong slot="header">Ship Faster</strong>
  <p>Compose previews, docs, and controls without rebuilding the shell every time.</p>
  <stellar-button slot="actions" appearance="soft" tone="primary">Browse</stellar-button>
  <small slot="footer">Updated 2 minutes ago</small>
</stellar-card>

API

Complete props, events, slots, and implementation notes for the shipped card.

Props

Prop	Type	Default	Notes
`appearance`	`normal \| filled`	`normal`
`orientation`	`vertical \| horizontal`	`vertical`

Events

Event	Source	Notes
custom events	none	`stellar-card` is compositional layout and emits no custom events.

Slots

Slot	Notes
`media`	Optional media region, typically an image or other visual surface.
`header`	Optional header content shown above the body.
default	Main card body content.
`footer`	Optional footer content shown after the body.
`actions`	Optional action row. In vertical cards it appears in the header; in horizontal cards it moves below the body.

Notes

The public tag is `stellar-card`, matching the component's media/header/body/footer/actions structure instead of the earlier local figure/title/layout variant.
The full prop surface is `appearance` plus `orientation`.
The component stays compositional: all meaningful content remains authored through slots instead of card-specific string props.
In vertical cards the actions sit in the header row; in horizontal cards they move below the body, matching the component's layout split.
This pass intentionally removes the old local `size`, `style`, and `layout` API in favor of the reset contract.