React Bootstrap Cards

Cards hold almost every block of the AdminKit dashboards: charts, tables, lists and forms. A card gives each block a frame and a title, so a page full of data still reads as separate pieces.

In AdminKit for React a card is Bootstrap's .card markup in JSX. There is no wrapper component. Cards are part of the free and PRO versions.

ExampleCopy Anchor Link

The demo pages put the title in the .card-header and the content in the .card-body:

<div className="card" style={{ maxWidth: "24rem" }}>
  <div className="card-header">
    <h2 className="card-title mb-0">Monthly report</h2>
  </div>
  <div className="card-body">
    <p className="card-text">
      Revenue grew in every region this month. The full report is ready to download.
    </p>
    <a href="#" className="btn btn-primary">Download</a>
  </div>
</div>

In JSX, style takes an object: style={{ maxWidth: "24rem" }}. In a page, let the grid size the card instead, with a column such as <div className="col-12 col-lg-6">.

ClassesCopy Anchor Link

AdminKit adds a shadow, a bottom margin and its own .card-title style in src/scss/3-components/_card.scss. Because .card-title has its own size, the demo pages use <h2 className="card-title"> under the page's <h1>. That keeps the heading order right for screen readers.

Header with a subtitle and actionsCopy Anchor Link

Give a card a menu when its content has actions of its own. The dashboards put that menu in the card header with CardActions. Render it before the title, since it floats to the right. Its menu items are placeholders: set your own in src/components/ui/card-actions.tsx.

import { CardActions } from "@/components/ui/card-actions";

<div className="card">
  <div className="card-header">
    <CardActions />
    <h2 className="card-title">Browser usage</h2>
    <p className="h6 card-subtitle text-body-secondary">Last 30 days</p>
  </div>
  <div className="card-body">Chrome leads with 58% of the sessions.</div>
</div>

Image and listCopy Anchor Link

To show a picture with the content, put the image before the header. Load files from public/ with asset() from @/lib/site. It adds the base path the app is served from:

import { asset } from "@/lib/site";

<div className="card">
  <img
    className="card-img-top"
    src={asset("/img/photos/unsplash-1.jpg")}
    alt="Team meeting"
    width="1200"
    height="800"
  />
  <div className="card-header">
    <h2 className="card-title mb-0">Team</h2>
  </div>
  <ul className="list-group list-group-flush">
    <li className="list-group-item">Design review</li>
    <li className="list-group-item">Sprint planning</li>
  </ul>
</div>

The width and height reserve the image's space before it loads. .card-img-top scales it to the width of the card.

Cards from an arrayCopy Anchor Link

When you have a set of similar items, such as projects, show them as a grid of cards. The grid is a map over your data, with a stable key:

const projects = [
  { id: 1, name: "Website redesign", due: "June 12" },
  { id: 2, name: "Mobile app", due: "July 3" },
];

<div className="row">
  {projects.map((project) => (
    <div key={project.id} className="col-12 col-md-6">
      <div className="card">
        <div className="card-body">
          <h2 className="card-title">{project.name}</h2>
          <p className="card-text text-body-secondary">Due {project.due}</p>
        </div>
      </div>
    </div>
  ))}
</div>

Add h-100 (or flex-fill, as on the dashboards) to the cards of one row to give them the same height.

Clickable cardsCopy Anchor Link

Make the whole card clickable when it leads to a page of its own. A card that is a link, a.card, or a card with a .stretched-link inside lifts on hover and on keyboard focus. It also shows the focus ring. With reduced motion, it does not move. For a route of your app, use React Router's Link:

import { Link } from "react-router";

<div className="card">
  <div className="card-body">
    <h2 className="card-title">
      <Link to="/pages-projects" className="stretched-link text-reset">
        Website redesign
      </Link>
    </h2>
    <p className="card-text">12 open tasks</p>
  </div>
</div>

AccessibilityCopy Anchor Link

• Give every card a heading (.card-title) at the right level of the page outline, so screen reader users can jump between cards.
• For a clickable card, prefer a .stretched-link on the title: the link's name is then the title, not the whole text of the card.
• Give images an alt that describes them, or alt="" when they are decorative.

RelatedCopy Anchor Link

• Next.js Bootstrap cards: the same markup in AdminKit for Next.js
• Bootstrap 5 cards: the cards of the HTML version
• Tables: a table that fills a card edge to edge
• Cards demo