Card

A pure CSS surface container — no JS behavior. Card renders an <article>; compose the inside with CardHeader / CardBody / CardText / CardFooter / CardAction instead of hand-writing the .card-* <div>s.

Usage


import { Card, CardBody, CardText } from '@mav-labs-inc/mavkit-react'
 
<Card raised>
  <CardBody>
    <CardText variant="title">Card title</CardText>
  </CardBody>
</Card>

Examples

Basic

Design

Crafting visual hierarchy

Thoughtful use of scale, weight, and spacing.

Jamie Doe

Raised, interactive card

Hover/press styling via the interactive prop.

Style variants

Outline

A hairline border, no shadow — .card--outline.

Raised

A more pronounced shadow — .card--raised.

Disabled

Dimmed to 42% opacity — .card--disabled.

Props

Card

Renders an <article> and accepts every native <article> attribute in addition to the props below.

Prop	Type	Default	Description
raised	boolean	—
outline	boolean	—
interactive	boolean	—	Adds hover/press styling.
disabled	boolean	—

CardAction

Button inside .card-footer — deliberately its own class (.card-action, not .btn).

Prop	Type	Default	Description
variant	'ghost' \| 'primary' \| 'danger'	'ghost'

CardText

One component for every .card-body text role.

Prop	Type	Default	Description
variant	'eyebrow' \| 'title' \| 'description'	'description'	'eyebrow' renders a <span class="card-eyebrow">, 'title' an <h3 class="card-title"> by default, 'description' a <p class="card-description">.
as	'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	'h3'	Heading level when variant="title" — ignored otherwise.

CardHeader / CardBody / CardFooter

Thin wrappers rendering a <div> with .card-header / .card-body / .card-footer — accept every native <div> attribute, no extra props of their own.

Styling a custom element as a card


import { cardClasses } from '@mav-labs-inc/mavkit-react'
 
<a href="/posts/1" className={cardClasses({ raised: true, interactive: true })}>
  …
</a>