Summary Card

Displays a summary of collected data before a final confirm step.

Preview · Summary Card

Code

HTML · @primus/ui-core

<div class="card" style="max-width:360px;padding:1.25rem">
  <h3 style="margin:0 0 1rem;font-size:0.975rem">Order Summary</h3>
  <div style="display:flex;flex-direction:column;gap:0.5rem;font-size:0.875rem">
    <div style="display:flex;justify-content:space-between"><span style="color:var(--muted-foreground)">Plan</span><span style="font-weight:500">Enterprise</span></div>
    <div style="display:flex;justify-content:space-between"><span style="color:var(--muted-foreground)">Region</span><span style="font-weight:500">EU West</span></div>
    <div style="display:flex;justify-content:space-between"><span style="color:var(--muted-foreground)">Billing</span><span style="font-weight:500">Annual</span></div>
    <hr style="border:none;border-top:1px solid var(--border);margin:0.25rem 0" />
    <div style="display:flex;justify-content:space-between"><span style="font-weight:600">Total</span><span style="font-weight:700;color:var(--primary)">$9,600/yr</span></div>
  </div>
</div>

React

import { PrimusSummaryCard } from 'primus-react-ui';

<PrimusSummaryCard title="Order Summary">
  <div>Plan: Enterprise</div>
  <div>Region: EU West</div>
</PrimusSummaryCard>

Angular

<primus-summary-card title="Order Summary" subtitle="Review before confirming">
  <div>Plan: Enterprise</div>
</primus-summary-card>

Props

Prop	Type	Default	Description
title	string	—	Card title
subtitle	string	—	Supporting subtitle

Version history

See the Changelog for version history and breaking changes.