Disclosure

Show design guidelines

Disclosures are expandable areas of content that are summarized or otherwise labeled to indicate what they relate to. There is a trigger that must be manually selected which allows the user to show and hide the additional content that is available.

Code

Certara UI

Click the component to disclose its content.

The hidden content that is now shown.

Toggle dark mode

<certara-disclosure summary="Label">
  The hidden content that is now shown.
</certara-disclosure>

certara-disclosure

Properties

Property	Attribute	Description	Type	Default
arrowEnd	arrow-end	Disclosure arrow will show at the end of the content	boolean	false
hasPadding	has-padding	Content is padded to be flush with the opener	boolean	false
innerClassName	inner-class-name	Additional class name(s) to apply to the inner content wrapper	string	undefined
open	open	Hidden content will be visible	boolean	false
summary	summary	Visible label of the disclosure control	string	undefined

Slots

Slot	Description
	Content hidden by the disclosure goes in the main slot
"custom-summary"	Slot available if summary requires custom formatting

---

Open

Disclosure can be set to be open by default

Toggle dark mode

<certara-disclosure summary="Open" open>
  Disclosure can be set to be open by default
</certara-disclosure>

Arrow at end

The disclosure arrow shows at the end of the opener

Toggle dark mode

<certara-disclosure summary="Arrow at end" arrow-end>
  The disclosure arrow shows at the end of the opener
</certara-disclosure>

Has padding

Content is padded to be flush with the opener

Toggle dark mode

<certara-disclosure summary="Has padding" has-padding>
  Content is padded to be flush with the opener
</certara-disclosure>

Custom summary

Custom summary

More complex formatting is available within a slot="custom-summary" element

Toggle dark mode

<certara-disclosure>
  <div slot="custom-summary">
    <h3><certara-icon name="bell" role="presentation"></certara-icon> Custom summary</h3>
  </div>
  More complex formatting is available within a <code>slot="custom-summary"</code> element
</certara-disclosure>

HTML

Click the component to disclose its content.

Label

The hidden content that is now shown.

Toggle dark mode

<details class="details-arrow">
  <summary>Label</summary>
  The hidden content that is now shown.
</details>