Theme

MCP Server

Getting started

Contributing

Breaking Changes

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

Card

Github

Storybook

Card is a component for grouping similar content in a container.

Importing

The component can be imported via:

import { 
	Card, 
	CardHeader, 
	CardTitle,
	CardActions, 
	CardSection, 
} from '@customerio/pluma-components/react';

A Card component can be composed with the following child components:

CardHeader
- a container component for the Card's header section
CardTitle
- the Card's title, must be nested within a CardHeader
CardActions
- a container for actions, such as links or buttons. Must be nested within a CardHeader. By default, buttons inside this section render as sm subtle buttons
CardSection
- a container component for content in the Card. CardHeader is a CardSection internally
- CardSection components are separated by a small gap

Usage

A complete example, using all the available child components, looks like:

Title

The Card's content

<Card>
	<CardHeader>
		<CardTitle>Title</CardTitle>

		<CardActions>
      <DropdownMenu placement="bottom-end">
        <DropdownMenuTriggerButton icon="more-vertical" isIconOnly={true} />

        <DropdownMenuContent>
          <DropdownMenuItem onClick={() => console.log('Option 1')}>
            Option 1
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => console.log('Option 2')}>
            Option 2
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
		</CardActions>
	</CardHeader>

	<CardSection>
		<Paragraph>The Card's content</Paragraph>
	</CardSection>
</Card>

Section Padding

By default, a CardSection will render with:

a top padding, if it's the first child of the Card
a bottom padding, if it's the last child of the Card
left and right paddings

By setting withPadding={false}, the CardSection component will stretch to the edges of the Card instead, which is useful for adding full-width content, like dividers or images.

Card title

Content section

API

`PlumaCardHeader` `extends Box`

`PlumaCardTitle` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

The text color. _{^{(See text color tokens)}}

`family` `"mono" | "sans" | undefined`

The font family. _{^{(See font family tokens)}}

`fontStyle` `"italic" | "normal" | undefined`

The font style. _{^{(See MDN font-style)}}

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

The text size. _{^{(See font size tokens)}}

`text` `"product-code" | "product-h1" | "product-h2" | "product-h3" | "product-h4" | "product-label" | "product-label-secondary" | "product-link" | "product-link-secondary" | "product-p" | "product-p-active" | "product-p-secondary" | "product-ps" | "product-ps-active" | "product-pxs" | "product-pxs-active" | "product-pxs-secondary" | undefined`

A predefined typography style. _{^{(See text tokens)}}

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

The font weight. _{^{(See font weight tokens)}}

`PlumaCardSection` `extends Box`

`withPadding` `boolean | undefined`

Default:true

Whether the section should render with padding. If false, the section will stretch like a CardInset, but with a gap between other sections. When true (default), the section includes standard Card padding.

`PlumaCardActions` `extends ButtonGroup`

`groupVariant` `"segmented" | "spaced" | undefined`

Default:segmented

Whether the buttons should be rendered as a connected group (segmented) or equally spaced apart (spaced).

`isDisabled` `boolean | undefined`

Disables all buttons in the group.

`size` `"small" | "medium" | "sm" | "md" | undefined`

Default:md

The size of the buttons. medium and small are deprecated, use md and sm instead.

`unsafe_iconColor` `"critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined`

Change the color of the icon. By default, the icon inherits the button's text color. Use with care, as it can cause inconsistencies in the UI.

`unsafe_iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

Overrides the icon size used within the button. Should only be used deliberately, as it can cause inconsistencies in the UI. For example, this is used in Pagination to increase the icon size.

`variant` `"subtle" | "primary" | "secondary" | "tertiary" | undefined`

Default:secondary

The variants of buttons to render.

Card

Importing

Usage

Section Padding

API

`PlumaCard` `extends Box`

`PlumaCardHeader` `extends Box`

`PlumaCardTitle` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"italic" | "normal" | undefined`

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

`PlumaCardSection` `extends Box`

`withPadding` `boolean | undefined`

`PlumaCardActions` `extends ButtonGroup`

`groupVariant` `"segmented" | "spaced" | undefined`

`isDisabled` `boolean | undefined`

`size` `"small" | "medium" | "sm" | "md" | undefined`

`unsafe_iconColor` `"critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined`

`unsafe_iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`variant` `"subtle" | "primary" | "secondary" | "tertiary" | undefined`

On this page

Card

Importing

Usage

Section Padding

API

PlumaCard extends Box

PlumaCardHeader extends Box

PlumaCardTitle extends Text

color "critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined

family "mono" | "sans" | undefined

fontStyle "italic" | "normal" | undefined

size "button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined

weight "bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined

PlumaCardSection extends Box

withPadding boolean | undefined

PlumaCardActions extends ButtonGroup

groupVariant "segmented" | "spaced" | undefined

isDisabled boolean | undefined

size "small" | "medium" | "sm" | "md" | undefined

unsafe_iconColor "critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined

unsafe_iconSize "fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined

variant "subtle" | "primary" | "secondary" | "tertiary" | undefined

On this page

`PlumaCard` `extends Box`

`PlumaCardHeader` `extends Box`

`PlumaCardTitle` `extends Text`

`color` `"critical" | "caution" | "success" | "bold" | "inherit" | "white" | "information" | "active" | "disabled" | "accent" | "base" | "invert" | "subtle" | "code" | "minimal" | "placeholder" | undefined`

`family` `"mono" | "sans" | undefined`

`fontStyle` `"italic" | "normal" | undefined`

`size` `"button" | "xxs" | "m" | "l" | "s" | "xl" | "xs" | "xxl" | "xxxl" | undefined`

`weight` `"bold" | "heavy" | "light" | "medium" | "regular" | "semibold" | undefined`

`PlumaCardSection` `extends Box`

`withPadding` `boolean | undefined`

`PlumaCardActions` `extends ButtonGroup`

`groupVariant` `"segmented" | "spaced" | undefined`

`isDisabled` `boolean | undefined`

`size` `"small" | "medium" | "sm" | "md" | undefined`

`unsafe_iconColor` `"critical" | "caution" | "success" | "information" | "feature" | "accent" | "base" | "invert" | "subtle" | undefined`

`unsafe_iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`variant` `"subtle" | "primary" | "secondary" | "tertiary" | undefined`