Card
Card
is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface.Key features:
- Pre-styled elements: Built-in support for
title
,subtitle
, andavatarUrl
properties - Flexible layout: Choose
vertical
(default) orhorizontal
orientation - Visual grouping: Automatic styling with background, borders, and spacing
- Clickable areas: Supports click events for interactive cards
Using Card
Card
is a container; it does not have any explicit properties.
You can nest the card's content into the <Card>
tag:<App>
<Card maxWidth="200px">
<HStack verticalAlignment="center">
<Icon name="info" />
<Text value="Information" variant="strong" />
</HStack>
<Text value="This is an example text" />
</Card>
</App>
Example: using Card
<App>
<Card maxWidth="200px">
<HStack verticalAlignment="center">
<Icon name="info" />
<Text value="Information" variant="strong" />
</HStack>
<Text value="This is an example text" />
</Card>
</App>
There are also prestyled properties one can make use of, detailed in the Properties section.
Prestyled elements always appear above other children.
<App>
<Card
avatarUrl="https://i.pravatar.cc/100"
title="Example Title"
subtitle="Predefined subtitle"
maxWidth="300px">
<HStack verticalAlignment="center">
<Icon name="info"/>
This is a card
</HStack>
</Card>
</App>
Example: using Card with prestyled elements
<App>
<Card
avatarUrl="https://i.pravatar.cc/100"
title="Example Title"
subtitle="Predefined subtitle"
maxWidth="300px">
<HStack verticalAlignment="center">
<Icon name="info"/>
This is a card
</HStack>
</Card>
</App>
Properties
avatarSize
This prop sets the size of the avatar. The default value is
sm
.Available values:
xs
, sm
, md
, lg
avatarUrl
The url for an avarar image. If not specified, but
showAvatar
is true, Card will show the first letters of the title
.linkTo
This optional property wraps the title in a
Link
component that is clickable to navigate.orientation
(default: "vertical")
An optional property that governs the Card's orientation (whether the Card lays out its children in a row or a column). If the orientation is set to
horizontal
, the Card will display its children in a row, except for its title
and subtitle
.Available values:
Value | Description |
---|---|
horizontal | The component will fill the available space horizontally |
vertical | The component will fill the available space vertically (default) |
<App>
<Card title="Example Title" subtitle="Example Subtitle" orientation="horizontal">
<SpaceFiller />
<Text>Text child #1</Text>
<Text>Text child #2</Text>
<Button label="Button Child" />
</Card>
</App>
Example: orientation
<App>
<Card title="Example Title" subtitle="Example Subtitle" orientation="horizontal">
<SpaceFiller />
<Text>Text child #1</Text>
<Text>Text child #2</Text>
<Button label="Button Child" />
</Card>
</App>
showAvatar
(default: false)
Indicates whether the avatar should be displayed
Note that in the demo below if the
avatarUrl
is specified, showAvatar
is automatically set to true but can still be hidden.<App>
<Card maxWidth="300px" avatarUrl="https://i.pravatar.cc/100" />
<Card maxWidth="300px" showAvatar="true" title="Example Card" />
<Card maxWidth="300px" showAvatar="true" />
</App>
Example: showAvatar
<App>
<Card maxWidth="300px" avatarUrl="https://i.pravatar.cc/100" />
<Card maxWidth="300px" showAvatar="true" title="Example Card" />
<Card maxWidth="300px" showAvatar="true" />
</App>
subtitle
This prop sets the pre-styled subtitle. If the property is not set, no subtitle is displayed in the Card.
This prop sets the prestyled subtitle.
<App>
<Card maxWidth="300px" subtitle="Example Subtitle" />
</App>
Example: subtitle
<App>
<Card maxWidth="300px" subtitle="Example Subtitle" />
</App>
title
This prop sets the pre-styled title. If the property is not set, no title is displayed in the Card.
This prop sets the prestyled title.
<App>
<Card maxWidth="300px" title="Example Title" />
</App>
Example: title
<App>
<Card maxWidth="300px" title="Example Title" />
</App>
Events
click
This event is triggered when the Card is clicked.
This event is triggered when the
Card
is clicked.<App>
<Card maxWidth="300px" onClick="toast('Clicked!')">
<HStack verticalAlignment="center">
<Icon name="info" />
<Text value="Information" variant="strong" />
</HStack>
<Text value="This is an example text" />
</Card>
</App>
Example: click
<App>
<Card maxWidth="300px" onClick="toast('Clicked!')">
<HStack verticalAlignment="center">
<Icon name="info" />
<Text value="Information" variant="strong" />
</HStack>
<Text value="This is an example text" />
</Card>
</App>
Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
Variable | Default Value (Light) | Default Value (Dark) |
---|---|---|
backgroundColor-Card | $color-surface-raised | $color-surface-raised |
border-Card | 1px solid $borderColor | 1px solid $borderColor |
borderBottom-Card | none | none |
borderBottomColor-Card | none | none |
borderBottomStyle-Card | none | none |
borderBottomWidth-Card | none | none |
borderColor-Card | none | none |
borderEndEndRadius-Card | none | none |
borderEndStartRadius-Card | none | none |
borderHorizontal-Card | none | none |
borderHorizontalColor-Card | none | none |
borderHorizontalStyle-Card | none | none |
borderHorizontalWidth-Card | none | none |
borderLeft-Card | none | none |
color-Card | none | none |
borderLeftStyle-Card | none | none |
borderLeftWidth-Card | none | none |
borderRadius-Card | $borderRadius | $borderRadius |
borderRight-Card | none | none |
color-Card | none | none |
borderRightStyle-Card | none | none |
borderRightWidth-Card | none | none |
borderStartEndRadius-Card | none | none |
borderStartStartRadius-Card | none | none |
borderStyle-Card | none | none |
borderTop-Card | none | none |
borderTopColor-Card | none | none |
borderTopStyle-Card | none | none |
borderTopWidth-Card | none | none |
borderHorizontal-Card | none | none |
borderVerticalColor-Card | none | none |
borderVerticalStyle-Card | none | none |
borderVerticalWidth-Card | none | none |
borderWidth-Card | none | none |
boxShadow-Card | none | none |
gap-avatar-Card | $gap-normal | $gap-normal |
gap-Card | var(--stack-gap-default) | var(--stack-gap-default) |
gap-title-Card | $gap-none | $gap-none |
horizontalAlignment-title-Card | none | none |
padding-Card | $space-4 | $space-4 |
paddingBottom-Card | none | none |
paddingHorizontal-Card | none | none |
paddingLeft-Card | none | none |
paddingRight-Card | none | none |
paddingTop-Card | none | none |
paddingVertical-Card | none | none |
verticalAlignment-title-Card | center | center |
Variable Explanations
Theme Variable | Description |
---|---|
gap-Card | The gap between the component's children. |
gap-title-Card | The gap between the title and the subtitle |
gap-avatar-Card | The gap between the avatar and the title panel |
horizontalAlignment-title-Card | The horizontal alignment of panel with the title and subtitle |
verticalAlignment-title-Card | The vertical alignment of the title and subtitle to the avatar |