Card

The Card component is used to group and showcase content. It supports optional visuals, flexible layout, and can include buttons or links.

Default

Edit settings

Review and adjust chat UI settings.

<Card
  href="#"
  title="Edit settings"
  description="Review and adjust chat UI settings."
  visual={
    <div className="flex justify-center items-center w-full">
      <SettingsEdit size={80} />
    </div>
  }
/>

Without link

Static card

This card does not link anywhere.

<Card
  title="Static card"
  description="This card does not link anywhere."
  visual={
      <div className="flex justify-center items-center w-full">
      <Chat size={80} />
      </div>
  }
  bgHoverColor=""
/>

Text only

This variant doesn’t include a visual element and is ideal for simple content blocks. You can customise the titleColor, descriptionColor, bgHoverColor, and radius to create strong visual contrast or subtle emphasis.

Text only

This card does not include an image or icon.

<Card
  href="#"
  title="Text only"
  titleColor="group-hover:text-white"
  description="This card does not include an image or icon."
  descriptionColor="group-hover:text-gray-400"
  className="bg-gray-100"
  radius="rounded-md"
  bgHoverColor="hover:bg-gray-900"
/>

With button + image

This card includes a full-width button placed below the description. The visual prop can be used for icons or other media, and you can nest additional elements like Button inside the card as children.

Interactive card

This card includes a call-to-action button.

Open project

<Card
  title="Interactive card"
  description="This card includes a call-to-action button."
  visual={
      <div
        className="flex justify-center overflow-hidden bg-cover bg-center w-full h-full"
        style={{ backgroundImage: "url(/core/images//img-sample.jpg)" }}
      ></div>
  }
  bgHoverColor=""
>
  <Button className="w-full mt-2">Open project</Button>
</Card>

Card with icon

This variant displays a compact icon to the left of the text content — useful for visually reinforcing meaning or status. You can customise the icon itself, as well as its background and border colour using iconBgColor and iconBorderColor props.

Left-aligned icon

This card uses a Carbon icon positioned to the left of the text content.

<Card
  href="#"
  title="Left-aligned icon"
  description="This card uses a Carbon icon positioned to the left of the text content."
  icon={<Checkmark size={16} className="text-white" />}
  iconBgColor="bg-blue-500"
  iconBorderColor="border-blue-500"
  className="bg-white"
  bgHoverColor="group-hover:bg-gray-50"
/>

Usage

Import the Card component and pass in the title, description, and optionally href, visual, or other layout props. The Card component can be referenced using the following format:

import Card from "../../components/Card";

<Card
  href="#"
  title="Project Files"
  description="Browse a collection of organized assets."
  visual={<div className="flex justify-center"><Folder size={80} /></div>}
/>