New release
Introducing a visual refresh to Forma 36 React componentsRelease notes
Forma 36

Card

StorybookGithub
stable

A Card is a component to group information or content of a particular subject in one place.

Table of contents

Component variations

This is the Card’s content

Code examples

Here you will find the most common ways of using the Card component.

With onClick

It’s possible to call an action when the user clicks on the Card. To do that, you only need to pass a function to the onClick prop.

Click on this card

Selectable cards

Sometimes you will need to use the Card as an selectable element in the UI. To achieve that behaviour, you should use a combination of the onClick and selected props. The former controlling the latter.

What is your favorite food?

🌮
🍕
🥦

With link and target

A Card can be used with the pourpose to navigate a user to an external page. To do that a user must pass a value to the href prop. Optionally, the user can pass a target prop to control how the link should be open.