Card
Usage
Cards are containers for displaying content in a structured, visually distinct way. They're ideal for grouping related information.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Customize the content, actions, and styling as needed.
Structure
A card typically includes:
- Title: Main heading
- Subtitle: Optional secondary text below the title
- Body: Main content text
- Media: Optional image or media placeholder
- Actions: Optional buttons (primary and secondary)
Layout Options
- Show media slot: Adds a placeholder for images or media
- Show action buttons: Adds primary and/or secondary action buttons
Styling
- Border radius: Controls corner rounding (0-24px)
- Padding: Internal spacing (0-48px)
- Shadow/Elevation: Visual depth (none, small, medium, large)
Color Modes
- Default colors: Uses predefined colors.
- Custom colors: Edit background, border, title, text, and accent colors directly.
- Theme Tokens: Uses tokens from Theme Builder (Pro feature).
Export Modes
- Safe: Basic card structure with title and body.
- Advanced: Includes custom colors, shadows, media, and actions (Pro feature).
Examples
Basic Card
Card1:
Type: Container
Background: RGBA(255, 255, 255, 1)
BorderRadius: 12
Padding: 16
CardTitle:
Type: Label
Text: "Card title"
FontSize: 16
FontWeight: FontWeight.Semibold
CardBody:
Type: Label
Text: "Card content goes here."
FontSize: 14
Card with Actions
Card1:
Type: Container
Background: RGBA(255, 255, 255, 1)
BorderRadius: 12
Padding: 16
CardTitle:
Type: Label
Text: "Card title"
CardBody:
Type: Label
Text: "Card content goes here."
ActionBtn:
Type: Button
Text: "Action"
OnSelect: Navigate(DetailScreen)
Card with Media
Card1:
Type: Container
Background: RGBA(255, 255, 255, 1)
BorderRadius: 12
Padding: 16
CardImage:
Type: Image
Image: "https://example.com/image.jpg"
Height: 200
CardTitle:
Type: Label
Text: "Card title"
CardBody:
Type: Label
Text: "Card content goes here."