Logo

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, and avatarUrl properties
  • Flexible layout: Choose vertical (default) or horizontal 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:
ValueDescription
horizontalThe component will fill the available space horizontally
verticalThe 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

VariableDefault Value (Light)Default Value (Dark)
backgroundColor-Card$color-surface-raised$color-surface-raised
border-Card1px solid $borderColor1px solid $borderColor
borderBottom-Cardnonenone
borderBottomColor-Cardnonenone
borderBottomStyle-Cardnonenone
borderBottomWidth-Cardnonenone
borderColor-Cardnonenone
borderEndEndRadius-Cardnonenone
borderEndStartRadius-Cardnonenone
borderHorizontal-Cardnonenone
borderHorizontalColor-Cardnonenone
borderHorizontalStyle-Cardnonenone
borderHorizontalWidth-Cardnonenone
borderLeft-Cardnonenone
color-Cardnonenone
borderLeftStyle-Cardnonenone
borderLeftWidth-Cardnonenone
borderRadius-Card$borderRadius$borderRadius
borderRight-Cardnonenone
color-Cardnonenone
borderRightStyle-Cardnonenone
borderRightWidth-Cardnonenone
borderStartEndRadius-Cardnonenone
borderStartStartRadius-Cardnonenone
borderStyle-Cardnonenone
borderTop-Cardnonenone
borderTopColor-Cardnonenone
borderTopStyle-Cardnonenone
borderTopWidth-Cardnonenone
borderHorizontal-Cardnonenone
borderVerticalColor-Cardnonenone
borderVerticalStyle-Cardnonenone
borderVerticalWidth-Cardnonenone
borderWidth-Cardnonenone
boxShadow-Cardnonenone
gap-avatar-Card$gap-normal$gap-normal
gap-Cardvar(--stack-gap-default)var(--stack-gap-default)
gap-title-Card$gap-none$gap-none
horizontalAlignment-title-Cardnonenone
padding-Card$space-4$space-4
paddingBottom-Cardnonenone
paddingHorizontal-Cardnonenone
paddingLeft-Cardnonenone
paddingRight-Cardnonenone
paddingTop-Cardnonenone
paddingVertical-Cardnonenone
verticalAlignment-title-Cardcentercenter

Variable Explanations

Theme VariableDescription
gap-CardThe gap between the component's children.
gap-title-CardThe gap between the title and the subtitle
gap-avatar-CardThe gap between the avatar and the title panel
horizontalAlignment-title-CardThe horizontal alignment of panel with the title and subtitle
verticalAlignment-title-CardThe vertical alignment of the title and subtitle to the avatar
This site is an XMLUI™ app.