Note

This documentation describes the Card Vue component for native UI views, for Xml templates see card.

Card

A styled vertical container that acts as a card surface. Wraps children in a VerticalLayout with configurable spacing and alignment.

Import

import { Card } from '@neos/design-system'

Props

Prop	Type	Default	Description
space	'none' \| 'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	'small'	Vertical gap between child elements
align	'start' \| 'left' \| 'center' \| 'end' \| 'right' \| 'stretch' \| 'space-between'	'stretch'	Cross-axis alignment of children

Slots

Slot	Description
default	Card content

Usage Examples

Basic card

<Card>
  <Heading :level="3">Order #1234</Heading>
  <Text>Status: In progress</Text>
  <HorizontalLayout align="right">
    <button label="View Details" />
  </HorizontalLayout>
</Card>

Card with custom spacing and center alignment

<Card space="medium" align="center">
  <Avatar label="JD" size="large" />
  <Heading :level="4">John Doe</Heading>
  <Text size="small">[email protected]</Text>
</Card>

Dashboard metric card

<GridLayout columns="* * * *" gap="medium">
  <Card v-for="metric in metrics" :key="metric.id" space="small">
    <Text size="small">{{ metric.label }}</Text>
    <Heading :level="2">{{ metric.value }}</Heading>
    <Badge :value="metric.trend" :severity="metric.severity" />
  </Card>
</GridLayout>