Holo Card

The holo-card is a standard container component designed to group content. It supports surface background styling, custom titles, subtitles, and a holographic glow state.

When to use

Use it for:

• Grouping related content into a single, scannable surface: a summary, a metric, a preview.
• Giving a block of content a title and subtitle.

Don’t use it for:

• A whole-card click target. Put a Link or Button inside it. Card itself is not interactive.
• Page layout. Use Container, Grid or Stack.
• Time-sensitive messages. Use Alert.

Live Preview

Standard Card

This is a standard card demonstrating surface styling, clean borders, and depth shadows.

<holo-card card-title="Standard Holo Card" subtitle="A clean, minimalist card container">
  <p>This is a standard card demonstrating surface styling, clean borders, and depth shadows.</p>
</holo-card>

Glowing Card

This card leverages holographic neon glows with a tech grid background guide, ideal for status dashboards and sci-fi layouts.

<holo-card card-title="Glowing Hololink Card" subtitle="Holographic display with backdrop blur" glow>
  <p>This card leverages holographic neon glows with a tech grid background guide, ideal for status dashboards and sci-fi layouts.</p>
</holo-card>

Accessibility

The card is non-interactive and has no role or landmark. cardTitle renders an <h3> and subtitle renders a <p>. The glow grid background is a decorative empty element and carries no content.

You provide:

• A heading level that fits the page. cardTitle is always an h3, so if that would skip or repeat levels in your outline, omit cardTitle and slot your own heading.
• Accessible names for any buttons or links you slot into the card.
• Keyboard access for any action in the card. The card adds no focus stops of its own.

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-card';

Properties

Property	Attribute	Type	Default	Description
cardTitle	card-title	string	—	The title displayed at the top of the card.
glow	glow	boolean	false	If true, applies a holographic neon glow effect and renders a background grid guide.
subtitle	subtitle	string	—	The subtitle displayed below the card title.

Slots

Slot	Description
(default)	The main body content of the card.