Typography

Typography components for text, titles, and paragraphs.

Text

Text types

Default textSecondary textSuccess textWarning textDanger textDisabled text

Example

Decorations

StrongMarkCodeUnderlineDeleteItalic

Example

Custom mark color (mark + CSS variable)

Default mark color
Custom mark color (--oas-text-mark-bg)

Example

Font weight (weight)

regularmediumsemiboldbold
strong (equivalent to semibold weight)

Example

Numeric (tabular-nums)

Default digits: 1 2 3 4 5 6 7 8 9 0tabular-nums: 1 2 3 4 5 6 7 8 9 0

Default: 12,345.67Tabular: 12,345.67Tabular: 1,234.56

Example

Text alignment (align)

start: left-aligned (default start)center: centered (common for headings)end: right-alignedjustify: justified for paragraphs, stretching word spacing so both edges align.

Example

Text depth

Depth 1 (secondary)Depth 2 (tertiary)Depth 3 (weakest)

Example

Custom tag

subsupinsmarkb

Example

Ellipsis

Text ellipsis

This is a long piece of text that will be truncated with an ellipsis once it exceeds the container width, without wrapping.

Example

Multiline ellipsis (line-clamp)

This is a much longer piece of text. The line-clamp attribute limits it to at most two lines, truncating the rest with an ellipsis. Multiline ellipsis needs no measurement — pure CSS, ideal for card summaries and list intros.

Example

Ellipsis with suffix (ellipsis-suffix)

To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune

Example

Copyable

Copyable text

Copyable text content

Example

Custom copy text (copy-text)

Install command: click copy to copy `npm i @oas-ui/ui`

Example

Actions

Actions position

Copy button after text (default)
Copy button before text
Custom action content

Example

Title

Heading levels

Heading 1Heading 2Heading 3

Example

Paragraph

Paragraphs

Paragraph text 1Paragraph text 2

Example

API

Component	Tag	Props
Text	oas-text	type, ellipsis, copyable
Title	oas-title	level (1-5), type, ellipsis
Paragraph	oas-paragraph	type, ellipsis

type values: default / secondary / success / warning / danger / disabled.

oas-text

Attribute	Description	Type	Default
actions-position	Action bar position: start (before the text) / end (default, after the text); pair with slot="actions"	string	end
align	Text alignment: start/center/end/justify	AlignType	—
code	Inline code style (monospace + light background)	boolean	—
copy-text	Custom content to copy (defaults to the current text)	string	—
copyable	Show a copy button that copies the text content on click	boolean	—
delete	Strikethrough (<del> semantics)	boolean	—
depth	Text softening tier: 1 / 2 / 3 (progressively lighter); only effective with type="default"	string	—
ellipsis	Single-line ellipsis when the text overflows its container	boolean	—
ellipsis-suffix	Suffix preserved when ellipsized (e.g. an expand link); works with ellipsis / line-clamp	string	—
italic	Italic (<em> semantics)	—	—
level	Heading level (1-5)	string	3
line-clamp	Number of lines before multi-line ellipsis (positive integer); combinable with ellipsis-suffix	string	—
mark	Highlighted mark (light yellow background, <mark> semantics)	—	—
numeric	Tabular figures (font-variant-numeric: tabular-nums) for aligned numeric columns in tables/stats	—	—
strong	Bold (font-weight 600, <strong> semantics)	—	—
tag	Render tag: replaces the default element (e.g. sub / sup / ins / em / strong)	string	—
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default
underline	Underline	—	—
weight	Font weight: regular/medium/semibold/bold (compatible with the strong boolean)	WeightType	—

Event	Description
oas-copy	Copy succeeded, detail: { text }
oas-copy-error	Copy failed, detail: { text }

Name	Description
default	—
actions	Action slot (copy/edit buttons etc.); position determined by actions-position

oas-title

Attribute	Description	Type	Default
actions-position	Action bar position: start (before the text) / end (default, after the text); pair with slot="actions"	string	end
align	—	AlignType	—
code	Inline code style (monospace + light background)	boolean	—
copy-text	Custom content to copy (defaults to the current text)	string	—
copyable	Show a copy button that copies the text content on click	boolean	—
delete	Strikethrough (<del> semantics)	boolean	—
depth	Text softening tier: 1 / 2 / 3 (progressively lighter); only effective with type="default"	string	—
ellipsis	Single-line ellipsis when the text overflows its container	boolean	—
ellipsis-suffix	Suffix preserved when ellipsized (e.g. an expand link); works with ellipsis / line-clamp	string	—
italic	Italic (<em> semantics)	—	—
level	Heading level (1-5)	string	3
line-clamp	Number of lines before multi-line ellipsis (positive integer); combinable with ellipsis-suffix	string	—
mark	Highlighted mark (light yellow background, <mark> semantics)	—	—
numeric	—	—	—
strong	Bold (font-weight 600, <strong> semantics)	—	—
tag	Render tag: replaces the default element (e.g. sub / sup / ins / em / strong)	string	—
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default
underline	Underline	—	—
weight	—	WeightType	—

Event	Description
oas-copy	Copy succeeded, detail: { text }
oas-copy-error	Copy failed, detail: { text }

Name	Description
default	—
actions	Action slot (copy/edit buttons etc.); position determined by actions-position

oas-paragraph

Attribute	Description	Type	Default
actions-position	Action bar position: start (before the text) / end (default, after the text); pair with slot="actions"	string	end
align	—	AlignType	—
code	Inline code style (monospace + light background)	boolean	—
copy-text	Custom content to copy (defaults to the current text)	string	—
copyable	Show a copy button that copies the text content on click	boolean	—
delete	Strikethrough (<del> semantics)	boolean	—
depth	Text softening tier: 1 / 2 / 3 (progressively lighter); only effective with type="default"	string	—
ellipsis	Single-line ellipsis when the text overflows its container	boolean	—
ellipsis-suffix	Suffix preserved when ellipsized (e.g. an expand link); works with ellipsis / line-clamp	string	—
italic	Italic (<em> semantics)	—	—
level	Heading level (1-5)	string	3
line-clamp	Number of lines before multi-line ellipsis (positive integer); combinable with ellipsis-suffix	string	—
mark	Highlighted mark (light yellow background, <mark> semantics)	—	—
numeric	—	—	—
strong	Bold (font-weight 600, <strong> semantics)	—	—
tag	Render tag: replaces the default element (e.g. sub / sup / ins / em / strong)	string	—
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default
underline	Underline	—	—
weight	—	WeightType	—

Event	Description
oas-copy	Copy succeeded, detail: { text }
oas-copy-error	Copy failed, detail: { text }

Name	Description
default	—
actions	Action slot (copy/edit buttons etc.); position determined by actions-position