---
title: Card
category: General
---

```jsx live
render(
  <Card spacing={<Divider />}>
    {[1, 2, 3].map((index) => (
      <Card.Section key={index}>Card {index}</Card.Section>
    ))}
  </Card>
)
```

```jsx live
render(
  <StackView
    grow={1}
    shrink={1}
    padding={2}
    spacing={2}
    backgroundColor="backgroundSecondary"
  >
    {[1, 2, 3].map((index) => (
      <Card key={index} padding={2} elevation={1}>
        Card {index}
      </Card>
    ))}
  </StackView>
)
```

```jsx live
render(
  <Card spacing={<Divider />}>
    <Card.Section>
      <Heading level={4}>Title</Heading>
    </Card.Section>
    <Card.Section subdued>Content</Card.Section>
  </Card>
)
```

```jsx live
render(
  <Card spacing={<Divider />}>
    <Card.Section as="header" subdued>
      <HeadingUppercase>2 People</HeadingUppercase>
    </Card.Section>
    <Card.Section axis="horizontal" alignment="center" padding={1}>
      <Avatar source="https://api.adorable.io/avatars/c" marginRight={1} />
      <StackView shrink={1}>
        <Text fontSize={4} truncate>
          This is where we need to write a pretty long sentence so we can get a
          feel for how text will work with the truncate prop.
        </Text>
        <Text fontSize={5}>This can be some secondary text</Text>
      </StackView>
    </Card.Section>
  </Card>
)
```