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.
Live Preview
Section titled “Live Preview”Standard Card
Section titled “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
Section titled “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 Holocron 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>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | ------------------------------------------------------------------------------ | --------- | ----------- |
| cardTitle | card-title | The title displayed at the top of the card. | string | undefined |
| subtitle | subtitle | The subtitle displayed below the card title. | string | undefined |
| glow | glow | If true, applies a holographic neon glow effect and renders a background grid. | boolean | false |
| Slot Name | Description | | --------- | --------------------------------------- | | (default) | The main body/content area of the card. |
Design System Integration
Section titled “Design System Integration”The component adapts automatically to dark and light mode themes via the following semantic tokens defined in tokens.css:
| CSS Variable | Description |
| ------------------------------ | --------------------------------------- |
| --s-color-bg-surface | Background color of the card. |
| --s-color-border-subtle | Subtle border color for standard state. |
| --s-color-border-interactive | Glow state border color. |
| --s-shadow-depth-1 | Standard elevation shadow. |
| --s-radius-container | Outer border radius for container. |
| --s-space-inset | Outer margin/padding spacing. |
| --s-transition-smooth | Default animation transition duration. |
| --s-font-sans | Card typography font family. |