Disclosure

In general, use a disclosure to reveal more information or details about an element or content on a page.

Use a disclosure to organize information that is either not critical for users to read or no longer fits on the page due to small screens. A disclosure displays a single section of content whereas an Accordion displays multiple sections that can be expanded simultaneously.

While the default size works well in most contexts, the compact size can be used for areas with more densely packed content. The compact disclosure can be used in sections where the body copy also uses a font size smaller than --rh-font-size-body-text-md.

The box variant, which is the default, should be used when there needs to be clear visual separation from surrounding content. Use the borderless variant where a cleaner, less visually disruptive style is preferred.

Title text should be simple so users know what to expect when they expand a disclosure. Beware that long character counts will break to two lines as screen sizes get smaller.

When a disclosure is expanded, content appears below the title text and caret icon. Try and limit panel content to text and simple elements only like calls to action.

When a disclosure is collapsed, the caret icon points down. When a disclosure is expanded, the caret icon animates to point up.

If there is a nested disclosure, it is always collapsed by default until a user expands it.

A disclosure can be used to organize interactive elements that do not fit on small screens like jump links.

A disclosure does not change much as screens get smaller.

Use one disclosure for one section at a time.

Do not stack disclosures, use an Accordion instead if more than one section is needed.

Keep the max width of body text at 789px.

Do not allow the max width of body text to exceed 789px otherwise it is hard to read.

Only a disclosure and other simple elements, like calls to action, can be nested within a disclosure.

Do not embed other complex elements in a disclosure.