Card

Card component is a content container used to display information in a structured format. It supports titles, subtitles, body text, icons, and interactive buttons, making it ideal for UI panels and information callouts in spatial environments.

Examples

Basic Card

The first example shows a basic card with a title, subtitle, and content. It uses the standard color theme and includes a "Close" and "Save" buttons.

import "spatial-design-system/primitives/ar-card.js";

<a-ar-card 
    position="0 1.5 -3" 
    title="Unsaved Progress"
    subtitle="Save Changes"
    content="Are you sure you want to save your current progress?" 
    buttons='[{"label": "cancel", "action": "cancel"}, {"label": "save", "action": "save"}]' 
></a-ar-card>

Customized Style

This example demonstrates the outlined mode and the use of icons. The card uses a custom color. The component automatically calculates text contrast to ensure readability, by adjusting textcolor.

import "spatial-design-system/primitives/ar-card.js";

<a-ar-card 
    position="0 1.5 -3" 
    title="Informations"
    subtitle="Important Notice"
    content="Please read the instructions carefully before proceeding." 
    buttons='[{"label": "cancel", "action": "cancel"}, {"label": "procede", "action": "procede"}]'
    outlined="true"
    prependicon="/info.png"
    color="#aeffe8"
    textcolor="white"
></a-ar-card>

Card with Image

The final example showcases the image property and dark mode. When an image is provided, it is applied as a texture to the card background.

import "spatial-design-system/primitives/ar-card.js";

<a-ar-card 
    position="0 1.5 -3" 
    title="Demo Card"
    subtitle="Example Subtitle"
    content="This is an example of an AR Card component." 
    buttons='[{"label": "cancel", "action": "cancel"}, {"label": "continue", "action": "continue"}]'
    mode="dark"
    image="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg"
></a-ar-card>

Props

Property	Type	Default	Description
visible	boolean	true	Controls the card's visibility. When true, the card is visible; when false, it is hidden.
position	number[]	0 0 0	Specifies the card's position.
opacity	number	1	Specifies the opacity of the component.
mode	string (light, dark)	""	Specifies the color scheme of the card, supporting either a light or dark theme.
color	string (blue, #fff)	#00BA92	Defines the primary color of the card, affecting elements such as text and background.
textcolor	string	black	Specifies the color of the card's text. If the contrast with the background is insufficient, the text color will not be applied.
title	string	“Card Title”	Sets the card's title text.
subtitle	string	“Subtitle”	Sets the card's subtitle text.
content	string	"This is an example of the basic card component."	Sets the card's main text.
prependicon	string	""	Defines the icon to be displayed within the card. If set, the icon appears before the card’s title.
appendicon	string	""	Defines the icon to be displayed in upper right corner of the card.
buttons	array	[{ label: "Close", action: "close" }]	Defines the action buttons displayed at the bottom of the card. Supports up to two buttons. Buttons emit a cardAction event containing their action string.
outlined	boolean	false	When enabled, the card is displayed with an outline instead of a solid background.
image	string	""	Applies a specific background image to the card.