Meta Grid

Labeled detail columns shown under a case study title. On case studies it is fed by the Project Duration and Services Provided fields in Sanity, and the whole row — including its top divider — is omitted when both are empty.

Default

Project Duration: 2 years
Services Provided: Product Design, Marketing Collaterals, UX & UI

Columns track the item count so values stay on one line: one column on mobile, two from sm, widening to three or four only when that many items are passed.

tsx

<MetaGrid
  items={[
    { label: 'Project Duration', value: '2 years' },
    { label: 'Services Provided', value: 'Product Design, UX & UI' },
  ]}
/>

Single item

Project Duration: 2 years

A case study that fills only one of the two fields still gets the row, with just that column.

Empty

Nothing renders — no divider, no empty labels.

tsx

<MetaGrid items={[]} /> // returns null

Props

Prop	Type	Default	Description
`items`*	`{ _key?: string; label: string; value: string }[]`	-	Labeled details to display. Values keep line breaks (whitespace-pre-line). Renders nothing when the array is empty.
`className`	`string`	-	Additional classes for the dl element

Import

tsx

import { MetaGrid } from '@/components/ui/MetaGrid'