Type Specimen
Type specimen: a large glyph and typeface–role pairs. Pro · Landing pages and brand › Brand and design system
A type specimen: a large sample with the face's name, then any of a paragraph, the weights, the character set and the type scale, all set in family. With only styles it is a compact pairing card.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add type-specimennpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { TypeSpecimen } from 'valyro-ui-pro';Props
| 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. |
Related components
- 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
- Template Card — Template card: live thumbnail, badge, description and links
- 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
Previous: Color Token · Next: Template Card · All Landing pages and brand