Disclosure
Importing
Add rh-disclosure to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-disclosure/rh-disclosure.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS shim
Warning
Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .
<link rel="stylesheet" href="/path/to/rh-disclosure/rh-disclosure-lightdom-shim.css">Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
Usage
<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>
<script type="module">
import '@rhds/elements/rh-disclosure/rh-disclosure.js';
</script>rh-disclosure
A disclosure toggles the visibility of content when triggered.
Slots
| Slot Name | Summary | Description |
|---|---|---|
summary
|
The title of the disclosure |
|
[default]
|
Place the content you want to disclose in the default slot. This content is hidden by default. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
color-palette
|
colorPalette |
Set the colorPalette of the disclosure. Overrides parent context. Possible values are:
|
|
|
open
|
open |
Sets the disclosure to be in its open (expanded) state |
|
|
variant
|
variant |
Borderless: Removes the outer and left border from the disclosure.
The background is |
|
|
summary
|
summary |
Sets the disclosure title via an attribute |
|
|
Methods
None
Events
| Event Name | Description |
|---|---|
toggle
|
Fires when a user opens or closes a disclosure. |
CSS Shadow Parts
None
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-border-width-sm
|
1px border width; Example: Secondary CTA or Button |
|
--rh-color-border-subtle
|
|
|
--rh-border-width-md
|
2px border width: Example: Alert |
|
--rh-font-family-body-text
|
Body text font family |
|
--rh-font-weight-body-text-medium
|
Medium font weight |
|
--rh-color-surface
|
|
|
--rh-color-text-primary
|
|
|
--rh-font-size-body-text-md
|
16px font size |
|
--rh-line-height-body-text
|
Line height for body text |
|
--rh-space-xl
|
24px spacer |
|
--rh-box-shadow-sm
|
Small box shadow |
|
--rh-color-brand-red
|
|
|
--rh-font-size-body-text-sm
|
14px font size |
|
--rh-space-md
|
8px spacer |
|
--rh-space-lg
|
16px spacer |
|
--rh-color-surface-lighter
|
Tertiary surface (light theme) |
|
--rh-color-surface-darker
|
Secondary surface (dark theme) |
|
--rh-color-interactive-primary-default
|
|
|
--rh-color-interactive-primary-hover
|
|
|
--rh-length-3xs
|
2px length token |
|
--rh-border-radius-default
|
3px border radius; Example: Card |
|
--rh-color-surface-light
|
Secondary surface (light theme) |
|
--rh-color-surface-dark
|
Tertiary surface (dark theme) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
