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

Framework HTML React Angular

Default

Click the component to disclose its content.

Content of the disclosure is now shown

Toggle dark mode

<certara-disclosure summary="Label">Content of the disclosure is now shown</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Label">Content of the disclosure is now shown</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Label">Content of the disclosure is now shown</certara-disclosure>

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>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Open" open>
  Disclosure can be set to be open by default
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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>

import { CertaraDisclosure } from '@certara/certara-ui-react';

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

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Has padding" hasPadding>
  Content is padded to be flush with the opener
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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>

import { CertaraDisclosure, CertaraIcon } from '@certara/certara-ui-react';

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

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<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>

InnerClassName

Content has an inner classname

Toggle dark mode

<certara-disclosure summary="Has padding" open inner-class-name="border-top">
  Content has an inner classname
</certara-disclosure>

import { CertaraDisclosure } from '@certara/certara-ui-react';

<CertaraDisclosure summary="Has padding" open innerClassName="border-top">
  Content has an inner classname
</CertaraDisclosure>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-disclosure summary="Has padding" open inner-class-name="border-top">
  Content has an inner classname
</certara-disclosure>

certara-disclosure

Properties

alignItems

Attribute	align-items
Type	"baseline" | "center" | "end" | "start"
Default	undefined
Required	false
Description	Control vertical alignment of disclosure triange

arrowEnd

Attribute	arrow-end
Type	boolean
Default	false
Required	false
Description	Disclosure arrow will show at the end of the content

hasHover

Attribute	has-hover
Type	boolean
Default	true
Required	false
Description	Controls the default hover effect

hasPadding

Attribute	has-padding
Type	boolean
Default	false
Required	false
Description	Content is padded to be flush with the opener

innerClassName

Attribute	inner-class-name
Type	string
Default	undefined
Required	false
Description	Additional class name(s) to apply to the inner content wrapper

open

Attribute	open
Type	boolean
Default	false
Required	false
Description	Hidden content will be visible

summary

Attribute	summary
Type	string
Default	undefined
Required	false
Description	Visible label of the disclosure control

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

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