Card

The Card component is a container for cohesive elements, often rendered visually as a card.

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>

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>

Properties

avatarUrl

Show the avatar (true) or not (false). If not specified, the Card will show the first letters of the title.

linkTo

This 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:

<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 Card 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>

subtitle

This prop sets the prestyled subtitle.

This prop sets the prestyled subtitle.

title

This prop sets the prestyled title.

This prop sets the prestyled 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>

Exposed Methods

This component does not expose any methods.

Styling

The Card component uses these theme variables to customize its appearance:

• border-Card
• backgroundColor-Card
• borderColor-Card
• padding-Card
• paddingHorizontal-Card
• paddingVertical-Card
• borderRadius-Card
• boxShadow-Card
• borderStyle-Card
• borderWidth-Card

The following theme definition changes the visual appearance of the card:

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "backgroundColor-Card": "$color-surface-200",
    "borderRadius-Card": "4px",
    "borderColor-Card": "$color-surface-600",
    "borderWidth-Card": "2px",
    "paddingHorizontal-Card": "2rem",
    "color": "black"
  }
}

Theme Variables