Disclosure
On this page
Guidelines
Use a disclosure to reveal more information or details about an element or content on a page.
Disclosure vs. Accordion
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.
Writing content
Title text
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.
Character count
| Element | Character Count |
|---|---|
| Title Text | 50 |
Panel content
When a disclosure is expanded, content appears below the title text and caret icon. Try and limit panel content to text and simple components only like calls to action.
Behavior
Collapsing and expanding
When a disclosure is collapsed, the caret icon points down. When a disclosure is expanded, the caret icon animates to point up.
Nested disclosure
If there is a nested disclosure, it is always collapsed by default until a user expands it.
Jump links
A disclosure can be used to organize interactive elements that do not fit on small screens like jump links.
Responsive design
A disclosure does not change much as screens get smaller.
Best practices
One panel only
Use one disclosure for one section at a time.
Do not stack disclosures, use an [Accordion](/elements/accordion/) instead if more than one section is needed.
Line length
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.
Nesting components
Only a disclosure and other simple components like calls to action can be nested within a disclosure.
Do not embed other complex components in a disclosure.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
