Importing
The component can be imported via:
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
- the Card's title, must be nested within a
CardActions- a container for actions, such as links or buttons. Must be nested within a
CardHeader. By default, buttons inside this section render assmsubtlebuttons
- a container for actions, such as links or buttons. Must be nested within a
CardSection- a container component for content in the Card.
CardHeaderis aCardSectioninternally CardSectioncomponents are separated by a small gap
- a container component for content in the Card.
Usage
A complete example, using all the available child components, looks like:
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.
API
Default:'div'
What element or component should be rendered.
PlumaCardActions extends ButtonGroup
Default:'div'
What element or component should be rendered.
PlumaCardHeader extends Box
Default:'div'
What element or component should be rendered.
Bottom margin, instead of the gap to the section below. Also takes an object keyed by breakpoint; below the first breakpoint given, the gap applies.
Top margin, instead of the gap to the section above. Also takes an object keyed by breakpoint; below the first breakpoint given, the gap applies.
Vertical margin, instead of the gaps to the sections around it. Also takes an object keyed by breakpoint; below the first breakpoint given, the gaps apply.
PlumaCardSection extends Box
Default:'div'
What element or component should be rendered.
Bottom margin, instead of the gap to the section below. Also takes an object keyed by breakpoint; below the first breakpoint given, the gap applies.
Top margin, instead of the gap to the section above. Also takes an object keyed by breakpoint; below the first breakpoint given, the gap applies.
Vertical margin, instead of the gaps to the sections around it. Also takes an object keyed by breakpoint; below the first breakpoint given, the gaps apply.
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.
PlumaCardTitle extends Text
Default:'span'
What element or component should be rendered.