ShowMore

The <ShowMore /> is used to make content scannable and offers the ability expand and collapse the content.

The <ShowMore /> component consists of two core elements:

• Content mask: Content lives within this area, and includes a gradient at the bottom edge when collapsed. The maxHeight defines how much content is displayed in this area.
• Expand action: Allows the user to expand and collapse the content within the mask.

Show codeCopy code

By default, the collapsed height is 4rem. You can customise this via the maxHeight prop.

If the content height is less than maxHeight, the mask and toggle button won’t be shown.

Show codeCopy code

The <ShowMore /> component can be used with any content, including images, text, and other components.

Show codeCopy code

The ShowMore component follows established accessibility patterns for toggled content, combining aspects of the Disclosure and Accordion ARIA practices.

When collapsed, the full content is hidden from assistive technologies using aria-hidden and the inert attribute. When expanded, the content is exposed as a named region via role="region" with appropriate labelling. The toggle button uses aria-expanded and aria-controls to communicate its behaviour.

When possible, associate the content with a visible heading using the aria-labelledby prop. This helps screen readers announce the content and toggle relationship clearly.

const headingId = 'section-heading';

return (
  <>
    <Heading level={2} id={headingId}>
      Section heading
    </Heading>
    <ShowMore aria-labelledby={headingId}>
      <Text>
        This is a long section of content that is initially collapsed to make the page easier to scan. Users can expand
        it to read the full details if needed.
      </Text>
    </ShowMore>
  </>
);

If there’s no visible heading to reference, use the aria-label prop to provide a descriptive name.

<ShowMore aria-label="Product description">
  <Text>Detailed information about the product...</Text>
</ShowMore>