Info Grid

Business Profile

A mixed-layout grid with full-width rows, 3-column rows, plain text values, and wrapping badge lists.

<InfoGrid.Root>
  <InfoGrid.Row>
    <InfoGrid.Cell>
      <KeyIcon.Root icon={<RiHeartLine />} />
      <div>
        <p>Category</p>
        <p>SaaS</p>
      </div>
    </InfoGrid.Cell>
  </InfoGrid.Row>
  <InfoGrid.Row>
    <InfoGrid.Cell>...</InfoGrid.Cell>
    <InfoGrid.Cell>...</InfoGrid.Cell>
    <InfoGrid.Cell>...</InfoGrid.Cell>
  </InfoGrid.Row>
</InfoGrid.Root>

Financial Data

A 3-column grid with highlighted monetary values, subtitles, and badge lists for funding history.

<InfoGrid.Root>
  <InfoGrid.Row>
    <InfoGrid.Cell>
      <KeyIcon.Root icon={<RiMoneyDollarCircleLine />} />
      <div>
        <p>Annual revenue</p>
        <span className="text-success-dark">$34,000 CAD</span>
      </div>
    </InfoGrid.Cell>
  </InfoGrid.Row>
</InfoGrid.Root>

Two Columns

A simple 2-column layout showing how the grid adapts to fewer cells per row.

<InfoGrid.Root>
  <InfoGrid.Row>
    <InfoGrid.Cell>...</InfoGrid.Cell>
    <InfoGrid.Cell>...</InfoGrid.Cell>
  </InfoGrid.Row>
</InfoGrid.Root>

Mobile Responsive

A narrow-width grid demonstrating single and 2-column rows for mobile layouts.

<InfoGrid.Root className="max-w-[400px]">
  <InfoGrid.Row>
    <InfoGrid.Cell>...</InfoGrid.Cell>
  </InfoGrid.Row>
  <InfoGrid.Row>
    <InfoGrid.Cell>...</InfoGrid.Cell>
    <InfoGrid.Cell>...</InfoGrid.Cell>
  </InfoGrid.Row>
</InfoGrid.Root>

Composed Group

A composed version that renders the grid from a rows array with KeyIcon, label, and children per cell. Supports `columns` per row for CSS grid layout and `span` per item.

<InfoGrid.Group rows={[
  {
    items: [
      { icon: <RiHeartLine />, label: 'Category', children: <p>SaaS</p> },
    ],
  },
  {
    columns: 3,
    items: [
      { icon: <RiSuitcaseLine />, label: 'Business name', children: <p>Happly</p> },
      { icon: <RiMapPinLine />, label: 'Location', children: <p>Vancouver, BC</p>, span: 2 },
    ],
  },
]} />

InfoGrid.Root

The card container with rounded corners, border, and shadow. Wraps content in a @container for responsive row/cell behavior.

InfoGrid.Row

A responsive row of cells. Stacks vertically on small containers and switches to a horizontal layout at @lg. Automatically adds a top divider for all rows except the first.

InfoGrid.Cell

An individual cell. When stacked (small), adds a bottom divider between cells. When horizontal (@lg), adds a right divider instead. Place any content as children — KeyIcon, badges, tags, text, or custom elements.

InfoGrid.Group

A composed component that renders a complete grid from an array of row definitions. Each row contains items with a KeyIcon, label, and children. Supports CSS grid columns and cell spanning.