Panel with description list

Block recipe

Use this block to summarize one object, such as a campaign, segment or person, as a short list of labeled facts on its detail page. Each row pairs a label with its value, so people can scan status, configuration and dates at a glance. Put the action that changes these facts, such as editing them, in the panel header.

Preview

Campaign details

Status: Running
Trigger: Person performs the signed_up event
Audience: Trial users segment
Goal: Upgrades to a paid plan within 14 days
Created: Mar 4, 2026
Last updated: Sep 28, 2026

Source

import {
	Badge,
	Button,
	DescriptionList,
	DescriptionListDetails,
	DescriptionListTerm,
	FormattedDateTime,
	Panel,
	PanelActions,
	PanelHeader,
	PanelSection,
	PanelTitle,
} from '@customerio/pluma-components/react';

export interface PanelWithDescriptionListProps {
	/** Called when the edit action is activated. */
	onEdit: () => void;
}

export function PanelWithDescriptionList({ onEdit }: PanelWithDescriptionListProps) {
	return (
		<Panel>
			<PanelHeader>
				<PanelTitle>Campaign details</PanelTitle>
				<PanelActions>
					<Button variant="secondary" size="sm" onClick={onEdit}>
						Edit details
					</Button>
				</PanelActions>
			</PanelHeader>
			<PanelSection>
				<DescriptionList layout="horizontal">
					<DescriptionListTerm>Status</DescriptionListTerm>
					<DescriptionListDetails>
						<Badge color="success" showStatusIndicator={true}>
							Running
						</Badge>
					</DescriptionListDetails>

					<DescriptionListTerm>Trigger</DescriptionListTerm>
					<DescriptionListDetails>Person performs the signed_up event</DescriptionListDetails>

					<DescriptionListTerm>Audience</DescriptionListTerm>
					<DescriptionListDetails>Trial users segment</DescriptionListDetails>

					<DescriptionListTerm>Goal</DescriptionListTerm>
					<DescriptionListDetails>Upgrades to a paid plan within 14 days</DescriptionListDetails>

					<DescriptionListTerm>Created</DescriptionListTerm>
					<DescriptionListDetails>
						<FormattedDateTime date="2026-03-04T12:00:00Z" format="medium" />
					</DescriptionListDetails>

					<DescriptionListTerm>Last updated</DescriptionListTerm>
					<DescriptionListDetails>
						<FormattedDateTime date="2026-09-28T12:00:00Z" format="medium" />
					</DescriptionListDetails>
				</DescriptionList>
			</PanelSection>
		</Panel>
	);
}

Scaffold

Copy this recipe into your app with the Pluma CLI. Replace <dest-dir> with the folder the file goes in, and add --name <Name> to rename the component and its file.

pluma-cli scaffold panel-with-description-list <dest-dir> --framework react

Components

This recipe uses these components. Each one's docs page lists its props.