Overview
Generate card components in two archetypes: a pricing tier card you can populate with your own price and description, and a metric stat card with a value, trend, and progress bar. Exports come as HTML with CSS, Tailwind classes, or a React component, with a glass-surface option.
How It Works
Pick the pricing or metric archetype. In pricing mode, type the price, a description, and toggle the glass surface; the canvas renders the card live with a plan badge, price row, description, and full-width call-to-action button. The metric archetype renders a fixed worked example with a header, delta, large value, and progress bar. Copy the output from whichever export tab suits your stack.
Step-by-Step Usage Guide
- Choose the pricing or metric archetype on the toggle.
- In pricing mode, set the price, description, and glass surface option.
- Review the live canvas rendering of the card.
- Copy the HTML and CSS tab, or use the Tailwind and React tabs as scaffolds.
Technical Specifications & Standards
The pricing archetype is fully parameterized: your price and description flow into all three export formats, and the glass toggle switches between a backdrop-blurred white-alpha surface and a solid dark zinc surface. Two pieces of its content are fixed rather than generated: the plan badge reads PRO TIER and the button reads Start Free Trial, so retext them after pasting. The metric archetype is a static showcase: its HTML and CSS export is complete and faithful, but the Tailwind and React tabs for this archetype are intentionally truncated placeholders that show the container classes followed by an ellipsis, so you must finish them using the HTML tab as the source of truth. The glass styling assumes a dark backdrop for the same reason as the other studios here; on light pages the solid variant is the safer export. Spacing, radii, and shadows are fixed in the CSS rather than exposed as controls, which keeps the output predictable at the cost of adjustability.
Targeted Use Cases
- Drafting a pricing section with a hero tier card for a SaaS landing page.
- Starting a metrics row of stat cards for an admin dashboard.
- Comparing glass and solid card treatments on a dark theme before adopting one.
- Handing a designer a working HTML prototype of a pricing tier.
Notes & Gotchas
- Retext the hardcoded PRO TIER badge and Start Free Trial button in the pricing export.
- Complete the metric archetype's Tailwind and React outputs by porting the full HTML version.
- Prefer the solid variant on light backgrounds; the glass surfaces assume a dark backdrop.
- Keep descriptions short; the card's fixed width and font sizing suit two or three lines.
Frequently Asked Questions
Why does my metric card export end with ellipsis dots?
The metric archetype's Tailwind and React exports are deliberately truncated scaffolds. The HTML and CSS tab contains the complete markup and styles, so port from there.
Can I change the badge and button text?
Not in the generator; they are fixed strings in the template. Edit the PRO TIER badge and Start Free Trial label in the exported code after copying.
What does the glass toggle change?
It switches the pricing card between a translucent, backdrop-blurred white-alpha surface and a solid dark surface with matching border, changing both the preview and all three export formats.
Can I control the card width or radius?
No. Width, padding, radius, and shadow are fixed in the template CSS. Adjust the stylesheet after exporting if your layout needs different proportions.