Type Specimen

Образец шрифтов: крупный знак и пары гарнитура — роль. Pro · Лендинги и бренд › Бренд и дизайн-система

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add type-specimen

npm install valyro-ui-pro

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

Prop	Type	Default
`family` *	`string`		CSS font-family of the specimen: the large sample, the weights, the characters and the scale.
`sample`	`string`	`'Aa'`	Large sample glyphs. Default "Aa".
`name`	`ReactNode`		Typeface name beside the sample: "Geist".
`meta`	`ReactNode`		A line under the name: classification, designer, licence.
`styles`	`TypeStyle[]`	`[]`	Typefaces of the system, listed beside the sample (a pairing: headings, body, code).
`weight`	`number`	`500`	Weight of the large sample. Default 500.
`size`	`'md' \| 'lg' \| 'xl'`	`'lg'`	Sample size. Default `lg`.
`text`	`ReactNode`		A paragraph set in the typeface, e.g. a pangram. Also the default line of the scale.
`weights`	`number[]`	`[]`	Weights shown side by side, e.g. `[400, 500, 600, 700]`.
`glyphs`	`string`		Character set: the alphabet, digits, punctuation.
`scale`	`TypeScaleStep[]`	`[]`	Type scale, largest first.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Heading level of the section titles (weights, characters, scale). Default 3.
`labels`	`Partial<TypeSpecimenLabels>`		Overrides for the built-in English text; keys left out keep their defaults.