Info Card - HapplyUI

Display labeled key-value detail items within a section card. Layout is fully controlled via className — use flexbox for inline, CSS grid for columns, or the default stacked flex-col.

Installation

bunx @happlyui/cli@latest add info-card

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

tv
happly-ui-utils
status-indicator

Usage

import * as InfoCard from "@/components/ui/info-card"

<InfoCard.Root className="flex-row flex-wrap items-stretch">
  <InfoCard.Item>
    <InfoCard.Label>Label</InfoCard.Label>
    <InfoCard.Value>Value content</InfoCard.Value>
  </InfoCard.Item>
</InfoCard.Root>

Examples

Inline

Items displayed side by side using flex-row. Uses Avatar for the user image.

Submitted date

Jan 3, 2025

Created by

Sean Muir

<InfoCard.Root className="flex-row flex-wrap items-stretch">
  <InfoCard.Item>
    <InfoCard.Label>Submitted date</InfoCard.Label>
    <InfoCard.Value>
      <RiTimeLine className="w-4 h-4" />
      <span>Jan 3, 2025</span>
    </InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Item>
    <InfoCard.Label>Created by</InfoCard.Label>
    <InfoCard.Value>
      <Avatar.Root size="20">
        <Avatar.Image src="avatar.jpg" />
      </Avatar.Root>
      <span>Sean Muir</span>
    </InfoCard.Value>
  </InfoCard.Item>
</InfoCard.Root>

Inline with Full Width Item

Mix inline and full-width items using className="w-full" on the item.

Submitted date

Jan 3, 2025

Created by

Sean Muir

Publication status

Require changes

<InfoCard.Root className="flex-row flex-wrap items-stretch">
  <InfoCard.Item>
    <InfoCard.Label>Submitted date</InfoCard.Label>
    <InfoCard.Value>...</InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Item>
    <InfoCard.Label>Created by</InfoCard.Label>
    <InfoCard.Value>...</InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Item className="w-full">
    <InfoCard.Label>Publication status</InfoCard.Label>
    <InfoCard.Value>
      <StatusBadge.Root status="pending">
        <StatusBadge.Icon as={RiAlertFill} />
        Require changes
      </StatusBadge.Root>
    </InfoCard.Value>
  </InfoCard.Item>
</InfoCard.Root>

Grid (2 Columns)

Items arranged in a fixed 2-column grid using className="grid grid-cols-2".

Start date

Mar 1, 2025

End date

Jun 30, 2025

Stacked

Items stacked vertically (default flex-col layout).

Application ID

#APP-2025-0142

Applicant

Jane Cooper

Status

Approved

<InfoCard.Root>
  <InfoCard.Item>
    <InfoCard.Label>Application ID</InfoCard.Label>
    <InfoCard.Value>#APP-2025-0142</InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Item>
    <InfoCard.Label>Status</InfoCard.Label>
    <InfoCard.Value>
      <StatusBadge.Root status="completed" variant="light">
        <StatusBadge.Dot />
        Approved
      </StatusBadge.Root>
    </InfoCard.Value>
  </InfoCard.Item>
</InfoCard.Root>

With Action

Inline layout with a responsive square action button. Uses h-[70px] on mobile and aspect-ratio:1/1 at @xl breakpoint.

Submitted date

Jan 3, 2025

Created by

Sean Muir

<InfoCard.Root className="flex-row flex-wrap items-stretch">
  <InfoCard.Item>
    <InfoCard.Label>Submitted date</InfoCard.Label>
    <InfoCard.Value>...</InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Item>
    <InfoCard.Label>Created by</InfoCard.Label>
    <InfoCard.Value>...</InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Action className="h-[70px] @xl:h-auto @xl:[aspect-ratio:1/1]" />
</InfoCard.Root>

Action with Notification

Action button with a notification dot and responsive square sizing.

Submitted date

Jan 3, 2025

Created by

Sean Muir

With Custom Action

Action button with a custom icon and responsive square sizing.

Application ID

#APP-2025-0142

Status

Approved

<InfoCard.Root className="flex-row flex-wrap items-stretch">
  <InfoCard.Item>...</InfoCard.Item>
  <InfoCard.Action className="h-[70px] @xl:h-auto @xl:[aspect-ratio:1/1]">
    <RiExternalLinkLine className="size-5 text-icon-sub-600" />
  </InfoCard.Action>
</InfoCard.Root>

Grid (3 Columns)

Items arranged in a fixed 3-column grid.

Amount

$25,000

Duration

12 months

Deadline

Dec 31, 2025

<InfoCard.Root className="grid grid-cols-3">
  <InfoCard.Item>
    <InfoCard.Label>Amount</InfoCard.Label>
    <InfoCard.Value>$25,000</InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Item>
    <InfoCard.Label>Duration</InfoCard.Label>
    <InfoCard.Value>
      <Badge.Root variant="stroke">12 months</Badge.Root>
    </InfoCard.Value>
  </InfoCard.Item>
  <InfoCard.Item>
    <InfoCard.Label>Deadline</InfoCard.Label>
    <InfoCard.Value>...</InfoCard.Value>
  </InfoCard.Item>
</InfoCard.Root>

API Reference

InfoCard.Root

The container for info card items. Default layout is flex-col. Use className for inline (flex-row), grid, or other layouts.

Prop	Type	Default	Description

InfoCard.Item

An individual card containing a label and value.

Prop	Type	Default	Description

InfoCard.Label

The label text for an info card item.

Prop	Type	Default	Description

InfoCard.Value

The value container for custom-rendered content. Defaults to text-label-xs and text-text-sub-600 styling.

Prop	Type	Default	Description

InfoCard.Action

An action button styled like an info card item. Renders a default RiArrowRightUpLine icon that can be overridden via children. Renders as an anchor tag when href is provided, otherwise a button. Use className="h-[70px] @xl:h-auto @xl:[aspect-ratio:1/1]" for the responsive square pattern.

Prop	Type	Default	Description
`href`	`string`	-	When provided, renders as an anchor tag instead of a button.
`notification`	`boolean`	`false`	Show a notification dot in the top-right corner.