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

Font Size (size)

size offers three font-size presets: small (helper text) / medium (baseline — the default falls back to the inherited font size) / large (emphasis), mapped to the --oas-font-size-* tokens; sm/lg aliases are equivalent and invalid values fall back to medium. Only oas-text exposes it (heading sizes are driven by level, avoiding two competing mechanisms).

size presets

small helper textmedium baseline (inherited by default)large emphasis

Example

Title

Heading levels

Heading 1Heading 2Heading 3

Example

Paragraph

Paragraphs

Paragraph oneParagraph two

Example

Content Blocks (blockquote / list / table)

The tag whitelist covers block-level content forms, shared by all three components (text/title/paragraph) — no separate long-form prose container is introduced; this extends the existing tag system directly:

• tag="blockquote": quote block (token border on the inline-start side + logical indent, RTL mirrors with the writing direction);
• tag="ul" / tag="ol": list blocks (normalized indent, built-in li spacing; li items go in the default slot);
• tag="table": content table (full width + collapsed borders; for th/td cell details prefer host styles or the oas-table feature component);
• Table parts (thead/tbody/tr/th/td/caption) and description lists (dl/dt/dd) are in the whitelist as well.

List/table blocks use unwrapped projection: the default slot is attached directly to the root element (ul accepts only li children and table only table parts — the content span wrapper would be invalid inside these tags).

Quote block (tag=blockquote)

Design is not about adding things, but about nothing left to take away.Simplicity is the ultimate sophistication. — For quotes in help docs and prose.

Example

List blocks (tag=ul / tag=ol)

Install the core package and icons

Register component families at the entry

Import single components on demand

Read the design spec

Compose pages from components

Wire up theme tokens

Example

Content table (tag=table)

ComponentCategoryStatusoas-collapseData displayStableoas-listData displayStableoas-typographyBasicStable

Example

Cell details for th bolding and td borders/padding are left to the host (shadow styles cannot reach deep into slotted subtrees); for sorting/filtering/pagination content tables use oas-table directly.

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

Attributes

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	—	—
size	Three font-size presets mapped to font-size tokens (medium falls back to inherited size)	string	—
strong	Bold (font-weight 600, <strong> semantics)	—	—
tag	Render tag: replaces the default element — inline semantics (sub/sup/ins/em/strong etc.) and content-block forms (blockquote quote / ul·ol list / table content table / dl description list plus table parts) are all whitelisted; list and table blocks use unwrapped projection (the default slot attaches directly to the root)	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	—

Events

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

Slots

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

CSS Variables

CSS Variable	Default
--oas-line-clamp	2
--oas-text-mark-bg	var(--oas-color-warning)

oas-title

Attributes

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 (default) / center / end / justify (start/end are logical values, RTL-safe); invalid values fall back to default	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 numerals (font-variant-numeric: tabular-nums) so number columns line up in tables/stats	—	—
strong	Bold (font-weight 600, <strong> semantics)	—	—
tag	Render tag: replaces the default element — inline semantics (sub/sup/ins/em/strong etc.) and content-block forms (blockquote quote / ul·ol list / table content table / dl description list plus table parts) are all whitelisted; list and table blocks use unwrapped projection (the default slot attaches directly to the root)	string	—
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default
underline	Underline	—	—
weight	Font weight tier: regular (400) / medium (500) / semibold (600) / bold (700); an explicit tier wins over the strong boolean; invalid values fall back	WeightType	—

Events

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

Slots

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

CSS Variables

CSS Variable	Default
--oas-line-clamp	2
--oas-text-mark-bg	var(--oas-color-warning)

oas-paragraph

Attributes

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 (default) / center / end / justify (start/end are logical values, RTL-safe); invalid values fall back to default	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 numerals (font-variant-numeric: tabular-nums) so number columns line up in tables/stats	—	—
strong	Bold (font-weight 600, <strong> semantics)	—	—
tag	Render tag: replaces the default element — inline semantics (sub/sup/ins/em/strong etc.) and content-block forms (blockquote quote / ul·ol list / table content table / dl description list plus table parts) are all whitelisted; list and table blocks use unwrapped projection (the default slot attaches directly to the root)	string	—
type	Text type: default / secondary / success / warning / danger / disabled	TextType	default
underline	Underline	—	—
weight	Font weight tier: regular (400) / medium (500) / semibold (600) / bold (700); an explicit tier wins over the strong boolean; invalid values fall back	WeightType	—

Events

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

Slots

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

CSS Variables

CSS Variable	Default
--oas-line-clamp	2
--oas-text-mark-bg	var(--oas-color-warning)