Details

The Details component is a collapsible section that can be used to display additional information or content. It is similar to the HTML <details> element, but with support for custom styling and content.

• Settings
• Events
• Usage
• Sizes
• Variants
• Controlled Open State
• Summary Order
• Slots
  • Slot: summary
  • Slot: content
  • Slot: default

Settings

The Details component accepts the following props:

Prop	Type	Default	Description
variant	TColours | TSurfaceColours	raised	The summary surface colour. Core colours use their matching on-* token, while surface colours use the shared text token.
size	TSizes	md	The shared control size for summary height, spacing, icon size, and typography.
title	string?	undefined	Optional summary title text displayed before any summary slot content.
icon	string?	undefined	Optional summary icon displayed before the title.
content	string	''	Optional plain text content used when no content or default slot is provided.
contentPadding	TSizes	size	Optional content padding token. When omitted, the content padding follows the current size.
contentLineHeight	TFontLineHeights	normal	The line-height token used for the content area.
contentBackgroundColour	TSurfaceColours | transparent	raised, or transparent when variant="transparent"	The surface colour used for the expanded content area.
borderRadius	TRadiusSize	md	The outer border radius of the details container.
borderWidth	TBorderWidths	thin	The border width used for the container and open-state divider.
disabled	boolean	false	Prevents toggling and applies a disabled visual state.

Events

The Details component supports the following model event:

Event	Description
update:open	Emitted when the disclosure state changes, for use with v-model:open.

Usage

Billing detailsUpdated 2 hours ago

Detailed content goes here

Show code

<LxDetails title="Billing details" icon="receipt" variant="primary">
	<template #summary>
		<span>Updated 2 hours ago</span>
	</template>
	<template #content>
		<p>
			Detailed content goes here
		</p>
	</template>
</LxDetails>

Sizes

The Details component supports different sizes, which can be set using the size prop. The available sizes are:

2xs Details

Detailed content goes here

xs Details

Detailed content goes here

sm Details

Detailed content goes here

md Details

Detailed content goes here

lg Details

Detailed content goes here

xl Details

Detailed content goes here

2xl Details

Detailed content goes here

3xl Details

Detailed content goes here

Show code

<LxFlex direction="column" gap="md">
	<LxDetails v-for="size in SIZES" :key="size" :size="size" icon="car">
		<template #summary>
			{{ size }} Details
		</template>
		<template #content>
			<p>
				Detailed content goes here
			</p>
		</template>
	</LxDetails>
</LxFlex>

Variants

The variant prop supports both semantic colours and semantic surfaces from the platform palette.

INFO

variant="transparent" removes the outer border and defaults both the summary and content surfaces to transparent.

primary details

Uses primary as the summary surface.

secondary details

Uses secondary as the summary surface.

accent details

Uses accent as the summary surface.

info details

Uses info as the summary surface.

success details

Uses success as the summary surface.

warning details

Uses warning as the summary surface.

danger details

Uses danger as the summary surface.

white details

Uses white as the summary surface.

black details

Uses black as the summary surface.

transparent details

Uses transparent as the summary surface.

Show code

<LxFlex direction="column" gap="md">
	<LxDetails v-for="variant in COLOURS" :key="variant" :variant="variant" :title="`${variant} details`" icon="circle-info">
		<template #content>
			<p>Uses <code>{{ variant }}</code> as the summary surface.</p>
		</template>
	</LxDetails>
</LxFlex>

base details

Uses base from the shared surface tokens.

raised details

Uses raised from the shared surface tokens.

sunken details

Uses sunken from the shared surface tokens.

overlay details

Uses overlay from the shared surface tokens.

border details

Uses border from the shared surface tokens.

Show code

<LxFlex direction="column" gap="md" class="lx-margin-top--xl">
	<LxDetails
		v-for="variant in SURFACE_COLOURS"
		:key="variant"
		:variant="variant"
		:title="`${variant} details`"
		icon="layer-group"
	>
		<template #content>
			<p>Uses <code>{{ variant }}</code> from the shared surface tokens.</p>
		</template>
	</LxDetails>
</LxFlex>

Controlled Open State

You can control the disclosure state with v-model:open.

Always open example

This example starts open using the shared component model.

Show code

<LxDetails v-model:open="controlledOpen" title="Always open example">
	<template #content>
		<p>
			This example starts open using the shared component model.
		</p>
	</template>
</LxDetails>

Summary Order

When icon, title, and the summary slot are all provided, the summary content order is:

1. icon
2. title
3. summary slot content
4. chevrons

Slots

The Details component provides the following slots:

Slot: summary

Adds extra inline content to the summary row after the icon and title, and before the chevrons.

Slot: content

Provides named content for the expanded panel. This takes priority over the default slot and the content prop.

Slot: default

Provides fallback expanded content when the named content slot is not used.