deprecated
Forma 36 version 3 is not supported anymoreClick here to go to version 4
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

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.

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.

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.