Template Card

Карточка шаблона: живая миниатюра, бейдж, описание и ссылки. Pro · Лендинги и бренд › Бренд и дизайн-система

Установка

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 — Настройка темы: пресеты, цвета, радиус, шрифт и живое превью
Color Token — Цветовой токен: плашка или строка с переменной, значением и копированием
Type Specimen — Образец шрифтов: крупный знак и пары гарнитура — роль
Hero Section — Первый экран лендинга
Feature Grid — Сетка преимуществ
Bento Grid — Бенто-сетка карточек разной ширины и высоты с адаптивом
Logo Cloud — Логотипы клиентов
Pricing Table — Тарифные планы
Comparison Table — Сравнение продуктов
Testimonials — Отзывы клиентов
FAQ Section — Частые вопросы
Award Badge — Награда с лавровым венком, звёздами и подписью