Making a card component

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 component from Wanda.

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.

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

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

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 , Title, and Text.

Madonna di Campiglio

October 31, 2021

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>

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.

Madonna di Campiglio

October 31, 2021

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.

Madonna di Campiglio

October 31, 2021

PrimarySecondary

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.

Madonna di Campiglio

October 31, 2021

PrimarySecondary

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.

Madonna di Campiglio

October 31, 2021

PrimarySecondary

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.

Madonna di Campiglio

October 31, 2021

PrimarySecondary

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.