The Card component is one of the most common patterns used across digital web products, no matter the size or the complexity of the project. If done correctly, this component can be handy to aggregate data and reduce the cognitive load of the user who's using the product.

Let's see how to build a custom and accessible card component with actions, images, and data inside.

## Card foundations

Our card component contains any content we want to pass inside. While there are many ways to create to align and style the content inside, we will use the components from the design system. Start by importing the empty [Card](/components/layouts/card) component from Wanda.

```tsx
import {Card} from "@wonderflow/react-components"

<Card bordered>
  Content
<Card>
```

Now we have our card element with all the predefined properties, padding included. Since we want to add an edge-to-edge image inside, we need to remove the padding from the Card component and put our image as content.

<LiveArea hAlign="center" vAlign="center">
  <Card bordered padding={false}>
    <img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1635663684911-6b1a5d5affb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" />
  </Card>
</LiveArea>

```tsx
import {Card} from "@wonderflow/react-components"

<Card bordered padding={false}>
  <img loading="lazy" decoding="async" />
</Card>
```

<Snackbar icon="circle-question">
Learn more about [`loading`](https://web.dev/learn/design/responsive-images/#loading-hints) and [`decoding`](https://web.dev/learn/design/responsive-images/#image-decoding) attributes.
</Snackbar>

## Adding some content

It's important to add some content inside our card in order to provide meaning and describe the card itself, what it represents. Let's proceed by using some Wanda components like [Stack](/components/layouts/stack) , [Title](/components/typography/title), and [Text](/components/typography/text).

<LiveArea hAlign="center" vAlign="center">
  <Card bordered padding={false}>
    <img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1635663684911-6b1a5d5affb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" />
    <Stack>
      <Title level="5">Madonna di Campiglio</Title>
      <Text dimmed={6} size={14}>October 31, 2021</Text>
    </Stack>
  </Card>
</LiveArea>

```tsx
import {Card, Stack, Title, Text} from "@wonderflow/react-components"

<Card bordered padding={false}>
  <img loading="lazy" decoding="async" />
  <Stack>
    <Title level="5" />
    <Text dimmed={6} size={14} />
  </Stack>  
</Card>
```

<Snackbar kind="info">
Wanda's `Title` component decouples the visual style and the semantic. In this case, `Title` uses the h5 style (set by the `level` property), but it's rendered as a span (the default value for `Title`). To render the component with a different semantic, use the `as` property
</Snackbar>

Wait. Our content is placed near the edge of the card since we removed the padding around the whole container. We need to restore the padding only for the content and not the image. To do so, we can use the `Stack` 's properties to add horizontal and vertical padding. We also need to add some space between the title and the date; the Stack component provides all the necessary to handle our needs. Let's fix this.

<LiveArea hAlign="center" vAlign="center">
  <Card bordered padding={false}>
    <img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1635663684911-6b1a5d5affb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" />
    <Stack rowGap={4} hPadding={16} vPadding={16}>
      <Title level="5">Madonna di Campiglio</Title>
      <Text dimmed={6} size={14}>October 31, 2021</Text>
    </Stack>
  </Card>
</LiveArea>

```tsx
import {Card, Stack, Title, Text} from "@wonderflow/react-components"

<Card bordered padding={false}>
  <img loading="lazy" decoding="async" />
  <Stack rowGap={4} hPadding={16} vPadding={16}>
    <Title level="5" />
    <Text dimmed={6} size={14} />
  </Stack>  
</Card>
```

You can notice that we didn't write any `CSS` so far. Excellent, isn't it? That's because Wanda components provide all the tools needed to handle everyday situations. It tries to save you from thinking and building the same UI elements repeatedly to achieve common patterns and interactions.

## Adding some actions

Let's suppose we need to add a couple of actions to our card. We need to add another `Stack` component below the content following the previous approach.

<LiveArea hAlign="center" vAlign="center">
  <Card bordered padding={false}>
    <img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1635663684911-6b1a5d5affb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" />
    <Stack rowGap={4} hPadding={16} vPadding={16}>
      <Title level="5">Madonna di Campiglio</Title>
      <Text dimmed={6} size={14}>October 31, 2021</Text>
      <Stack>
        <Button>Primary</Button>
        <Button kind="flat">Secondary</Button>
      </Stack>
    </Stack>
  </Card>
</LiveArea>

```tsx
import {Card, Stack, Title, Text, Button} from "@wonderflow/react-components"

<Card bordered padding={false}>
  <img loading="lazy" decoding="async" />
  <Stack rowGap={4} hPadding={16} vPadding={16}>
    <Title level="5" />
    <Text dimmed={6} size={14} />
    <Stack rowGap={4} hPadding={16} vPadding={16}>
      <Button />
      <Button kind="flat" />
    </Stack>  
  </Stack>  
</Card>
```

Because the `Stack` component puts elements one below each other, we need to change this behavior by using its `direction` property. We can also change the `fill` behavior to prevent Stack's children from filling all the available space and add a gap between buttons. 

<LiveArea hAlign="center" vAlign="center">
  <Card bordered padding={false}>
    <img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1635663684911-6b1a5d5affb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" />
    <Stack rowGap={4} hPadding={16} vPadding={16}>
      <Title level="5">Madonna di Campiglio</Title>
      <Text dimmed={6} size={14}>October 31, 2021</Text>
      <Stack direction="row" fill={false} columnGap={8}>
        <Button>Primary</Button>
        <Button kind="flat">Secondary</Button>
      </Stack>
    </Stack>
  </Card>
</LiveArea>

```tsx
import {Card, Stack, Title, Text, Button} from "@wonderflow/react-components"

<Card bordered padding={false}>
  <img loading="lazy" decoding="async" />
  <Stack rowGap={4} hPadding={16} vPadding={16}>
    <Title level="5" />
    <Text dimmed={6} size={14} />
    <Stack direction="row" fill={false} columnGap={8}>
      <Button />
      <Button kind="flat" />
    </Stack>  
  </Stack>  
</Card>
```

## Fixing the visual hierarchy

Our card component is almost done, but we need to fix the visual hierarchy between content and actions. You can notice that right now, there is no cognitive distinction between the card content and the actions, making all of them perceived as a single and aggregated "block" of content.

This result is caused by the `rowGap={4}` property we set earlier since our buttons Stack is a direct child of the previous one. We can add space between the actions and the date text to fix this by following a couple of ways:

- Adding `vPadding` to the `Stack` containing the buttons.
- Adding another stack to wrap text content and actions, and set `rowGap`.

### With vertical padding

The quickest way to fix our issue, but it comes with drawbacks. By adding `vPadding` to the `Stack` that contains the buttons, we add space below the buttons (because that property adds a gap on the vertical axis, so on top and below the Stack) may not be the desired result.

<LiveArea hAlign="center" vAlign="center">
  <Card bordered padding={false}>
    <img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1635663684911-6b1a5d5affb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" />
    <Stack rowGap={4} hPadding={16} vPadding={16}>
      <Title level="5">Madonna di Campiglio</Title>
      <Text dimmed={6} size={14}>October 31, 2021</Text>
      <Stack direction="row" fill={false} columnGap={8} vPadding={32}>
        <Button>Primary</Button>
        <Button kind="flat">Secondary</Button>
      </Stack>
    </Stack>
  </Card>
</LiveArea>

```tsx
import {Card, Stack, Title, Text, Button} from "@wonderflow/react-components"

<Card bordered padding={false}>
  <img loading="lazy" decoding="async" />
  <Stack rowGap={4} hPadding={16} vPadding={16}>
    <Title level="5" />
    <Text dimmed={6} size={14} />
    <Stack direction="row" fill={false} columnGap={8} vPadding={32}>
      <Button />
      <Button kind="flat" />
    </Stack>  
  </Stack>  
</Card>
```

### With an additional stack

To solve our issue best, we can add another `Stack` element inside the card to define the gap between text content and actions. We have to wrap the first `Stack` with another `Stack` element and move the `Stack` containing the buttons outside. Then we can add the `rowGap` and move both the horizontal and vertical padding on the newly created `Stack`.

<LiveArea hAlign="center" vAlign="center">
  <Card bordered padding={false}>
    <img loading="lazy" decoding="async" src="https://images.unsplash.com/photo-1635663684911-6b1a5d5affb9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80" />
    <Stack rowGap={32} hPadding={16} vPadding={16}>
      <Stack rowGap={4}>
        <Title level="5">Madonna di Campiglio</Title>
        <Text dimmed={6} size={14}>October 31, 2021</Text>
      </Stack>
      <Stack direction="row" fill={false} columnGap={8}>
        <Button>Primary</Button>
        <Button kind="flat">Secondary</Button>
      </Stack>
    </Stack>
  </Card>
</LiveArea>

```tsx
import {Card, Stack, Title, Text, Button} from "@wonderflow/react-components"

<Card bordered padding={false}>
  <img loading="lazy" decoding="async" />
  <Stack rowGap={32} hPadding={16} vPadding={16}>
    <Stack rowGap={4}>
      <Title level="5" />
      <Text dimmed={6} size={14} />
    </Stack>
    <Stack direction="row" fill={false} columnGap={8}>
      <Button />
      <Button kind="flat" />
    </Stack>  
  </Stack>  
</Card>
```

## Conclusion

With this pill, we saw how we could make a card component by only using the elements provided by Wanda without writing a line of `CSS`. Here's just an example of how we can save time and effort while keeping consistency across the whole UI, improving the speed and without sacrificing the overall quality.

Making a card component

### TL;DR:

Use Frames whenever possible.


#### Advantages of frames

- You can place a background-color
- You can assign different constraints to different elements (or ignore them by pressing <kbd>cmd</kbd> while resizing)
- Manage overflow with `clip content`
- Assign grids

Actually, there are some specific use cases when the groups come handy, and that's when you want to scale child elements, but not effects, strokes, or type

Frame vs Group in Figma

Wanda design system provides a full-featured Wonderflow logo designed to be used consistently across the projects and assets.

## Variants

The logo itself has two variants, and each of them are made for both `light` and `dark` colors.

### Full logo

The full logo is used when the brand communication is strong and prominent. It needs a big white space area around in order to keep the information readable.

![](/design/brand/full-logo-light.svg)

### Mark

The mark logo is often used when the brand identity should not be so prominent and when the is not enought room for the full logo.

![](/design/brand/mark-logo-light.svg)

### Icon

Icons are versions of the mark logo. The stroke is thicker in order to keep readability on really small sizes. They are used for example as tab icon inside web pages.

![](/design/brand/icon-logo-light.svg)

## General usage

**As a rule of thumb: use the full logo** — exception made : 

- use the Icon version when  the space is really a constraint (eg: favicon)
- use the mark version when there are multiple instances of the Wonderflow logo in the page/presentation 

## Downloads

You can find and download the official Wonderflow logo  from the [brand page](https://design.wonderflow.ai/design/brand/#resources). You'll get both light and dark versions, in the following formats `svg` and `png`.


#design

Making a card component

Frame vs Group in Figma

Using Wonderflow's logo consistently