Typography
Used to display titles, paragraphs, text, links, and other typographic content.
Heading Levels
Use the level prop to define the heading level, supporting h1 - h6.
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
Text Types
Use the type prop to define the semantic color of the text.
Text Decorations
Control text styles through props like bold, italic, underline, delete, mark, code, and keyboard.
Code StyleKeyboard StyleText Sizes
Use the size prop to set the font size.
Paragraph
The Paragraph component supports type semantic colors and align alignment.
YH-UI is a modern UI component library for Vue 3, providing rich components and utilities. With Composition API and strong TypeScript support, it offers an ultimate development experience.
This paragraph uses the secondary color type, suitable for auxiliary descriptions.
Link
The Link component supports props like href, target, type, underline, and disabled.
Ellipsis
Titles and paragraphs support the ellipsis prop. Set to boolean for Titles (single-line) and numbers for Paragraphs (multi-line).
This is a very long title. It will be truncated with an ellipsis when the container width is insufficient.
Use in Nuxt
Typography fully supports Nuxt 3/4 SSR rendering. Components are auto-imported in Nuxt projects, no manual registration needed. The following example demonstrates async loading state with useAsyncData.
Welcome to YH-UI
A modern Vue 3 component library with full Nuxt SSR support.
YH-UI provides rich components to help quickly build modern web applications.
Learn MoreSSR Notes:
- ✅ All Props and styles fully supported
- ✅ Semantic tags (h1-h6, p, span, a) render perfectly
- ✅ Slot content fully rendered
- ✅ Ellipsis styles correctly output
- ✅ Text decoration, type colors, and other states work normally
SSR Safety
All Typography sub-components have passed complete SSR tests, ensuring that server-side and client-side rendering are completely consistent with no Hydration errors.
API
Typography.Title Props
| Prop | Description | Type | Default |
|---|---|---|---|
| level | Heading level | 1 | 2 | 3 | 4 | 5 | 6 | 1 |
| type | Text type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | — |
| bold | Bold | boolean | true |
| delete | Strikethrough | boolean | false |
| underline | Underline | boolean | false |
| italic | Italic | boolean | false |
| mark | Highlight mark | boolean | false |
| code | Code style | boolean | false |
| ellipsis | Ellipsis | boolean | false |
| tag | Custom tag name | string | — |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Typography.Text Props
| Prop | Description | Type | Default |
|---|---|---|---|
| type | Text type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | — |
| size | Font size | 'small' | 'default' | 'large' | — |
| bold | Bold | boolean | false |
| delete | Strikethrough | boolean | false |
| underline | Underline | boolean | false |
| italic | Italic | boolean | false |
| mark | Mark | boolean | false |
| code | Code style | boolean | false |
| keyboard | Keyboard style | boolean | false |
| ellipsis | Ellipsis | boolean | false |
| tag | Custom tag name | string | 'span' |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Typography.Paragraph Props
| Prop | Description | Type | Default |
|---|---|---|---|
| type | Text type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | — |
| align | Alignment | 'left' | 'center' | 'right' | 'justify' | — |
| spacing | Paragraph spacing | 'compact' | 'default' | 'loose' | 'default' |
| bold | Bold | boolean | false |
| delete | Strikethrough | boolean | false |
| italic | Italic | boolean | false |
| mark | Mark | boolean | false |
| ellipsis | Ellipsis (boolean=single, number=multi) | boolean | number | false |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Typography.Link Props
| Prop | Description | Type | Default |
|---|---|---|---|
| href | Link URL | string | — |
| target | Target | '_blank' | '_self' | '_parent' | '_top' | '_self' |
| type | Link type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | — |
| underline | Underline | boolean | false |
| disabled | Disabled | boolean | false |
| themeOverrides | Theme overrides | ComponentThemeVars | — |
Slots
All Typography sub-components support the default slot.
Theme Variables
Typography supports customizing local styles by overriding the following CSS variables:
| Variable Name | Description | Default |
|---|---|---|
--yh-typography-title-color | Title color | var(--yh-text-color-primary, #303133) |
--yh-typography-title-weight | Title font weight | 600 |
--yh-typography-h1-size | h1 size | 32px |
--yh-typography-h2-size | h2 size | 28px |
--yh-typography-h3-size | h3 size | 24px |
--yh-typography-h4-size | h4 size | 20px |
--yh-typography-h5-size | h5 size | 16px |
--yh-typography-h6-size | h6 size | 14px |
--yh-typography-text-color | Text color | var(--yh-text-color-regular, #606266) |
--yh-typography-text-size | Text size | 14px |
--yh-typography-line-height | Line height | 1.5 |
--yh-typography-paragraph-line-height | Paragraph line height | 1.8 |
--yh-typography-link-color | Link color | var(--yh-color-primary, #409eff) |
--yh-typography-link-hover-color | Link hover color | var(--yh-color-primary-light-3, #79bbff) |
--yh-typography-mark-bg | Mark background color | #ffe58f |
--yh-font-family-monospace | Monospace font | 'SFMono-Regular', Consolas, monospace |