Card

When to use

Use for grouping logically related information. product previews, content summaries, navigational options. One card, one topic. this pattern is highly scannable.

Guidelines

• One topic per card: Focusing on a single topic makes cards scannable.
• Summary content <100 chars: Just enough to decide whether to engage further.
• Contrast from background: Use border or shadow to distinguish cards from the page.
• Consistent padding: Use 8pt grid system for internal spacing.
• Responsive: Single column on mobile, two on tablet, three+ on desktop.
• In our admin pages: Prefer Tailwind utility classes over PrimeVue Card for more control.

How it works