CardsStable

Spec Card

Sourcecomponents/cards/SpecCard.astro

Overview

A tall dark card for a product or hardware spec — a badge, a brand line, a large serif-italic model name, and a spec paragraph. Built for the cloud / GPU surfaces.

Badge

Brand

Model

Spec · spec · spec — a short line of specs.

Badge

Brand

Model

Spec · spec · spec — a short line of specs.

Brand

Model

Spec · spec · spec — a short line of specs.

Props

Prop	Type	Default	Notes
`brand`	string	`—`	Brand line (e.g. "NVIDIA"). Required.
`model`	string	`—`	Model name — rendered serif-italic. Required.
`badge`	string	`—`	Small badge (e.g. "Reserve now").
`spec`	string	`—`	Supporting spec paragraph.

Usage

Slot extra content (a price, a button) after the spec if needed.

<SpecCard
  badge="Badge"
  brand="Brand"
  model="Model"
  spec="Spec · spec · spec."
/>

Rules

Let the model name be the hero — keep the brand small above it.

Use short, scannable specs separated by middots.

Don't

Write a paragraph of prose — it’s a spec, not a story.

Use it on a light section — it’s a dark card by design.