Product summary card
Compact summary of a selected product or service. Echoes back the offering a visitor chose, with a service-line tag and price.
ProductSummaryCard is a compact read-only summary of a chosen offering — a leading ServiceTag coloured by serviceLine, a caption label, the offering value, and an optional price • frequency line. Use it to confirm back to a visitor what they selected.
Use it for
- "Interested in" / "Selected plan" confirmations in a lead or checkout flow
- The offering echo inside a "Get Started" or contact modal
- Any place that restates a single selected product/service with its price
For a full comparison grid of offerings a visitor picks from, use pricing cards — ProductSummaryCard shows the one already chosen.
Import
import { ProductSummaryCard } from '@brikdesigns/bds';Variants
Service line
serviceLine recolours the leading ServiceTag and resolves its glyph — brand, marketing, information, product, back-office, service.
<ProductSummaryCard serviceLine="marketing" label="Selected plan" value="Growth Marketing Plan" price="$1,200" frequency="monthly" />Price and frequency
price and frequency are optional and join with a •. Omit both for a name-only summary; the card collapses gracefully.
<ProductSummaryCard serviceLine="brand" label="Interested in" value="Standard Logo Design" price="$650" frequency="one time" />When not to use
It's a summary, not a selector. ProductSummaryCard is read-only confirmation of an already-chosen offering. To let a visitor choose, use pricing cards or a card control.
Accessibility
- Renders a
<div>; the ServiceTag, label, value, and price are plain text content with no interactive semantics. Wrap it in a link or button only if the whole card is meant to be actionable.
API
| Prop | Type | Default |
|---|---|---|
serviceLine | 'brand' | 'marketing' | 'information' | 'product' | 'back-office' | 'service' | — (required) |
serviceName | string | — |
label | string | — (required) |
value | string | — (required) |
price | string | — |
frequency | string | — |
Plus all standard <div> HTML attributes.
Related
- Pricing card — the selectable offering grid
- Card control — a selectable card
- Storybook playground