Details

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

A UI component for creating collapsible accordion-style content using the details/summary elements.

Unlike Accordion, this component is implemented with CSS only — no JavaScript required.

↓

Preview

Details Title

Content goes here.

<Details.Root bd>
  <Details.Summary p="20" bgc="base-2" hov="neutral">
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content p="20">
    <p>Content goes here.</p>
  </Details.Content>
</Details.Root>

<details class="c--details -bd">
  <summary class="c--details_summary l--flex -g:10 -ai:center -p:20 -bgc:base-2 -hov:neutral">
    <span class="c--details_title -fx:1">Details Title</span>
    <span class="c--details_icon a--icon" aria-hidden="true"></span>
  </summary>
  <div class="c--details_body">
    <div class="c--details_content l--flow -flow:s -p:20">
      <p>Content goes here.</p>
    </div>
  </div>
</details>

Usage

Provided as Details (c--details) from the @lism-css/ui package.

Import

import { Details } from '@lism-css/ui/react';

The following components are available:

<Details.Root>
<Details.Summary>
<Details.Title>
<Details.Icon>
<Details.Content>

Props

Property	Description
`<Details.Root>` `--duration`	Duration of the expand/collapse animation.
`<Details.Title>` `as`	The HTML tag used to render the title inside the summary element.

Structure

<Details.Root>
  <Details.Summary>
    <Details.Title>Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content>...Contents...</Details.Content>
</Details.Root>

Source Code

The source code is available on GitHub.

Examples

Custom title tag and exclusive expansion

<Details.Title> renders as a span by default, but you can specify an HTML tag via as.

Additionally, as a native feature of details/summary, adding a name attribute restricts the group to one open item at a time.

↓

Example

Details Title

Content goes here.

Details Title

Content goes here.

<Stack g="10">
  <Details.Root bd name="details-group-01">
    <Details.Summary p="20" bgc="base-2" hov="neutral">
      <Details.Title as="h3">Details Title</Details.Title>
      <Details.Icon />
    </Details.Summary>
    <Details.Content p="20">
      <p>Content goes here.</p>
    </Details.Content>
  </Details.Root>
  <Details.Root bd name="details-group-01">
    <Details.Summary p="20" bgc="base-2" hov="neutral">
      <Details.Title as="h3">Details Title</Details.Title>
      <Details.Icon />
    </Details.Summary>
    <Details.Content p="20">
      <p>Content goes here.</p>
    </Details.Content>
  </Details.Root>
</Stack>

Heading elements inside summary

There was a known issue where screen readers could not detect the role of heading elements placed inside summary, but as of 2026, this has been largely resolved in modern browsers.

Changing the animation duration

The duration of the <Details> open/close animation is controlled by the --duration variable, which defaults to the same value as <Accordion> — --acc-duration.

For local adjustments, override the --duration variable. For global adjustments, override --acc-duration on :root.

↓

Example

Details Title

Content goes here.

<Details.Root bd style={{ '--duration': '.4s' }}>
  <Details.Summary p="20" bgc="base-2" hov="neutral">
    <Details.Title as="h3">Details Title</Details.Title>
    <Details.Icon />
  </Details.Summary>
  <Details.Content p="20">
    <p>Content goes here.</p>
  </Details.Content>
</Details.Root>