Info Card

Overview

Info Card surfaces a single labelled piece of information alongside an icon — for example a metadata field, a setting, or a summary value. It composes a Card with an Icon and a label/description pair, giving these small facts a consistent treatment across the interface.

The description accepts any node, so it can hold plain text, a number, or richer content such as a Badge. Passing an onClick makes the whole card interactive (inheriting Card’s hover and click affordance), which is useful when the card links somewhere.

Usage

Import the component:

import { InfoCard } from "@eqtylab/equality";

Basic usage — label, description, and icon are all required:

<InfoCard label="Policy Type" description="Custom" icon="Shield" />

The icon accepts a Lucide icon name or a React element, matching the Icon component.

Default

Interactive (onClick)

Passing an onClick handler makes the whole card clickable and adds a hover affordance, inheriting the behavior from Card. Use it when the card links somewhere or triggers an action. Click the card below to see it respond.

Usage

<InfoCard
  label="Policy Type"
  description="Custom"
  icon="Shield"
  onClick={() => handleSelect()}
/>

Elevations

Use the elevation prop with the ELEVATION constant to place the card on the elevation scale (raised is the default). The inner icon’s background is automatically set one level below the card so it stays visually nested.

Sunken

Base

Raised (default)

Overlay

Usage

import { InfoCard, ELEVATION } from "@eqtylab/equality";

<InfoCard
  label="Policy Type"
  description="Custom"
  icon="Shield"
  elevation={ELEVATION.SUNKEN}
/>;

Props