Disclosure
On this page
On this page
Overview
A disclosure toggles the visibility of content when triggered.
Edit element properties
import '@rhds/elements/rh-disclosure/rh-disclosure.js';<rh-disclosure summary="Collapsed panel title">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
</rh-disclosure>Set the colorPalette of the disclosure. Overrides parent context. Possible values are:
lightest(default)lighterlightdarkdarkerdarkest
Sets the disclosure to be in its open state
Sets the disclosure title via an attribute
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
When to use
- Show or hide information with a trigger
- Move extra content away from a task that a user needs to complete
- Organize components that do not fit on small screen sizes like jump links
An collapsed disclosure element with a gray outline and trigger text that says, "Start your product trial".
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
