Descriptions

Displays multiple read-only fields in groups, commonly used for displaying information on detail pages.

Basic Usage

Basic Usage

Custom Sizes

Custom Sizes

Long Content

When a description item contains long text, the component automatically wraps lines and displays them correctly.

Long Content

Custom Styles

Custom Styles

Use in Nuxt

Descriptions component fully supports SSR rendering in Nuxt 3/4. It's automatically imported in Nuxt projects.

Use in Nuxt

SSR Notes:

• Fully supports SSR-safe rendering for props, slots, and border layout
• Slot content and custom styles render consistently across server and client
• Size switching and vertical layout are driven by props only, so hydration stays stable

SSR Safety

The Descriptions component is table-like presentational UI driven entirely by props and slots, which makes it a naturally stable SSR component in Nuxt pages.

API

Props

Prop	Description	Type	Default
title	Title of the list	string	undefined
extra	Extra operation area text. Can also be provided through the extra slot	string	undefined
border	Whether to show border	boolean	false
column	Number of columns per row	number	3
direction	Arrangement direction	'horizontal' | 'vertical'	'horizontal'
size	List size	'large' | 'default' | 'small'	'default'
colon	Whether to show colon when border is disabled	boolean	true
label-style	Custom label style	CSSProperties	undefined
content-style	Custom content style	CSSProperties	undefined
label-class-name	Custom label class name	string	''
content-class-name	Custom content class name	string	''
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Types

Descriptions Item Props

Prop	Description	Type	Default
label	Label text	string	''
span	Number of columns occupied	number	1
width	Column width	string | number	''
min-width	Minimum column width	string | number	''
align	Content alignment	'left' | 'center' | 'right'	'left'
label-align	Label alignment	'left' | 'center' | 'right'	'left'
class-name	Custom content class name	string	''
label-class-name	Custom label class name	string	''
label-style	Custom label style	CSSProperties	undefined
content-style	Custom content style	CSSProperties	undefined

Slots

Component	Slot Name	Description
YhDescriptions	default	Content of descriptions, usually YhDescriptionsItem
YhDescriptions	title	Custom title, overrides title prop
YhDescriptions	extra	Custom extra area, overrides extra prop
YhDescriptionsItem	default	Item content
YhDescriptionsItem	label	Custom label content, overrides label prop

Events

This component does not expose component events.

Expose

This component does not expose public instance methods or properties.

Theme Variables

The Descriptions component uses the following CSS variables for customization:

Variable	Description	Default
--yh-descriptions-header-margin-bottom	Header bottom spacing	20px
--yh-descriptions-title-font-size	Title font size	16px
--yh-descriptions-extra-font-size	Extra area font size	14px
--yh-descriptions-border-color	Border color	var(--yh-border-color-lighter)
--yh-descriptions-item-font-size	Cell font size	Uses the current size preset
--yh-descriptions-cell-padding-v	Cell vertical padding	Uses the current size preset
--yh-descriptions-cell-padding-h	Cell horizontal padding	Uses the current size preset

Size System Variables

The size prop automatically switches the item font size and padding variables so the component stays aligned with the shared YH-UI size system.

Type Exports

Name	Description
YhDescriptionsProps	Props type for YhDescriptions
YhDescriptionsSlots	Slots type for YhDescriptions
YhDescriptionsItemProps	Props type for YhDescriptionsItem
YhDescriptionsItemSlots	Slots type for YhDescriptionsItem
YhDescriptionsInstance	Public instance type for YhDescriptions
YhDescriptionsItemInstance	Public instance type for YhDescriptionsItem