#Card

Holds one self-contained thing — a metric, an integration, a saved view — in a block you can compare against its neighbours in a grid; reach for Table when the same fields repeat down a list, and for a Heading when you only mean to section a page. Passing any handler turns the whole card into the target: it becomes focusable and picks up hover and pressed overlays, while clicks on a link or button inside it stay with that control.

Source · Storybook

#Usage

import { Badge } from '@wallarm-org/design-system/Badge';
import { Button } from '@wallarm-org/design-system/Button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@wallarm-org/design-system/Card';

#Examples

#Variants

primary sits on the page surface and secondary on a tinted fill, each shown plain, with a handler, and disabled — where the card fades and stops answering the pointer.

#Various content

What the block tolerates: body copy that wraps, a CodeSnippet, a whole Field, a CardTitle with an icon, and a header standing on its own with nothing under it.

#Props

#CardContent

#CardFooter

#CardHeader

#CardTitle

#Explorer