Descriptions

Displays read-only information in groups, suitable for detail page scenarios. The default horizontal layout places the label and content on the same row (greyed label on the left); layout="vertical" stacks the label above the content.

Basic Usage

Basic description list (vertical layout)

Alice30Beijing138-0000-0000alice@example.comFrontend Engineer

Example

Horizontal Layout (Default)

Omitting layout renders horizontal: the greyed label sits on the left and the content on the right of the same row:

Horizontal layout (default)

Ops Consoleprod-east-1v2.4.0Alice2024-08-01 10:30

Example

Columns

Two-column layout

SO-20240801-0012024-08-01 10:30¥ 1,280.00Standard delivery

Example

No Title

No title

Productionv1.0.0Running

Example

Bordered Detail Table

bordered renders grid lines as a table: the label cell gets a tinted background (semantic token, dark-mode aware), which fits detail pages such as user profiles:

Bordered detail table

Alice138-0000-0000alice@example.comAdministratorPlatform Engineering2021-07-12

Example

Column Span (span)

The item's span="N" spans N columns — handy for long addresses or remarks. If N exceeds the remaining columns in the current row, the grid wraps it to the next row; there is no "fill the remaining columns" semantics, so pass an explicit column count:

Spanning a long address

Alice138-0000-0000100000Room 1801, 18F, Tower A, No.100 Moumou Rd, Chaoyang District, Beijing

Example

Colon

colon appends a colon after each label (hidden by default):

Label colon

Component auditHigh2024-08-10Alice

Example

Size

size="small|medium|large" provides three density levels controlling font size and bordered cell padding (medium is the default; font size follows the outer context):

Three sizes

Small densityD-001EnabledMedium densityD-002EnabledLarge densityD-003Enabled

Example

Title Actions (slot="extra")

An action area on the same row as the title, on the right — for entries such as Edit:

Title action area

Alice138-0000-0000alice@example.comEdit

Example

Rich Label (slot="label")

The item's slot="label" accepts rich content such as an icon plus text; it is mutually exclusive with the label attribute (the slot wins):

Label with icons

Accountalice Emailalice@example.com DepartmentPlatform EngineeringEmployed

Example

Custom Content

Rich content

AliceAdministratorResponsible for the component library design system and engineering standards.Employed

Example

Data-Driven (items Channel)

The items attribute (JSON array) or the same-named property renders items directly; each entry supports label / content / span (content is plain text — rich content belongs to the declarative child channel). Declarative children always win: when <oas-descriptions-item> children exist the items data is not rendered; once removed the data channel takes over automatically — pick per scenario:

items attribute (JSON)

Example

Host-generated items (declarative channel)

Example

Responsive Columns (Host Media Query)

Without the column attribute, the column count comes from the CSS variable --oas-desc-columns (default 3), so the host can lower it responsively with a media query (setting column pins the count and ignores the variable):

Fewer columns on narrow screens

edge-gateway-01GW-2000CN-East-1v3.2.12024-08-01 10:30Online

Example

Loading (Skeleton Composition)

Combine with oas-skeleton for a "loading details" pattern: show the skeleton while loading, then swap in the description list (the loading region carries aria-busy for screen readers):

Loading details

Reload

alice¥ 12,800.00OK

Example

Font Size

The oas-descriptions-item font size follows the outer context (inherited) by default; override with the CSS variable --oas-descriptions-item-font (e.g. 18px). The container's size levels are pushed through --oas-desc-font-size (the item-level variable wins).

Other style hooks (CSS variable piercing, dark-mode aware):

Variable	Purpose	Default
--oas-desc-label-color	Field label color	--oas-color-text-secondary
--oas-desc-columns	Column count (applies when column is not set; pair with media queries for responsive layouts)	3

API

oas-descriptions

Attributes

Attribute	Description	Type	Default
bordered	Bordered table form: full grid lines + tinted label cells	boolean	—
colon	Show a colon after the label (default false)	boolean	—
column	Columns per row	string	3
items	Data-driven rendering JSON (label/content/span fields); declarative children always win	Array<Record<string, unknown>> | string	[]
layout	Layout: horizontal (default, label and content on one row) / vertical (label above content)	string	horizontal
size	Size: small / medium (default) / large (padding and font size linked)	string	medium
title	Title (rendered into the visible title region; absorbed from the host on read so no native hover tooltip remains; pass an empty string to clear); use slot="title" for rich content	string	—

Slots

Name	Description
default	Description items (oas-descriptions-item)
extra	Action area on the same row as the title (right side)
title	Rich title content slot, overrides the title attribute text when present

CSS Variables

CSS Variable	Default
--oas-desc-columns	3

oas-descriptions-item

Attributes

Attribute	Description	Type	Default
label	Field label	string	—
span	Column span (positive integer, default 1; grid wraps when exceeding remaining columns)	string	1

Slots

Name	Description
default	Field content
label	Rich label content (icon + text etc.; mutually exclusive with the label attribute, slot wins)

CSS Variables

CSS Variable	Default
--oas-desc-cell-border	0px
--oas-desc-cell-px	0
--oas-desc-cell-py	0
--oas-desc-colon	none
--oas-desc-item-gap	var(--oas-space-2)
--oas-desc-label-bg	transparent
--oas-desc-label-color	var(--oas-color-text-secondary)
--oas-desc-layout-dir	row
--oas-descriptions-item-font	var(--oas-desc-font-size, inherit)