Template Card

Template card: live thumbnail, badge, description and links. Pro · Landing pages and brand › Brand and design system

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add template-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { TemplateCard } from 'valyro-ui-pro';

Prop	Type	Default
`title` *	`ReactNode`		Template name.
`description`	`ReactNode`		What it contains, in a sentence.
`badge`	`ReactNode`		Tag after the title: "Pro", "New".
`imageSrc`	`string`		Screenshot of the template.
`imageAlt`	`string`	`''`	Text alternative of the screenshot.
`preview`	`ReactNode`		Live thumbnail instead of an image: real components, scaled down (see the docs demo).
`action`	`ReactNode`		Main action under the text: "Get Pro", "Use template".
`previewHref`	`string`		Address of the running demo; adds the "Live preview" link.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the title (default 3).
`labels`	`Partial<TemplateCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Theme Customizer — Theme customizer: presets, colors, radius, font and a live preview
Color Token — Color token: swatch or row with the variable, value and copy
Type Specimen — Type specimen: a large glyph and typeface–role pairs
Hero Section — Landing page hero
Feature Grid — Feature grid
Bento Grid — Responsive bento grid of cards in mixed sizes
Logo Cloud — Customer logos
Pricing Table — Pricing plans
Comparison Table — Product comparison
Testimonials — Customer testimonials
FAQ Section — Frequently asked questions
Award Badge — Award badge with a laurel wreath, stars and caption