@elemental-ui-alpha/card v0.0.2

Card

import { Card } from '@elemental-ui-alpha/card';

Use when you have a simple message to communicate to users that doesn’t require any secondary steps.

<Card padding="large">
  <Heading level="3" marginBottom="medium">
    Some Title
  </Heading>
  <Text>Some content.</Text>
</Card>

Elevation

The conceptual distance from the surface of the page, along the z-axis.

<Columns gap="small" collapse="xlarge">
  <Card padding="medium" elevation={1}>
    Elevation 1
  </Card>
  <Card padding="medium" elevation={2}>
    Elevation 2
  </Card>
  <Card padding="medium" elevation={3}>
    Elevation 3
  </Card>
  <Card padding="medium" elevation={4}>
    Elevation 4
  </Card>
  <Card padding="medium" elevation={5}>
    Elevation 5
  </Card>
</Columns>