A two-column detail view for portfolio or work items, displaying ID, title, company, period, role, and description alongside an optional cover image.

ItemDetailsLayout renders a responsive master-detail card: the main content column (3/4 width on md+) contains the item identifier, title, company with logo, role, and description sections; an optional image column occupies the remaining quarter.

Installation

npx shadcn@latest add @adv/item-details-layout

Usage

import { ItemDetailsLayout } from '@/components/ui/ItemDetailsLayout';

<ItemDetailsLayout
  id="CASE-001"
  title="Unified Design System"
  company="Acme Corp"
  period="Jan – Apr 2024"
  role="Lead Product Designer"
  description="Consolidated three product surfaces into a single Figma component library and token set."
/>

Example

CASE-001

Unified Design System

Acme Corp

Jan – Apr 2024

Role

Lead Product Designer

Overview

Consolidated three product surfaces into a single Figma component library and token set, reducing designer–developer handoff time by 40%.

Props

Prop	Type	Default	Description
`id`	`string`	—	Short identifier rendered in monospace above the title (e.g. `"CASE-001"`). Required.
`title`	`string`	—	Main heading for the item. Required.
`company`	`string`	—	Company or client name. Required.
`period`	`string`	—	Time period string (e.g. `"Jan – Apr 2024"`). Required.
`role`	`string`	—	Role label displayed in the "Role" section. Required.
`description`	`string`	—	Overview paragraph text. Required.
`logo`	`string`	—	URL to the company logo. Renders a 40×40 image next to the company name.
`image`	`string`	—	URL for the right-column cover image. Omit to render a single full-width column.
`additionalContent`	`ReactNode`	—	Extra content rendered below the description section.

Item Details Layout

Installation

Usage

Example

Unified Design System

Props

On this page