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>

With description

Additional descriptive text is available within a description prop

Toggle dark mode

<certara-disclosure summary="With description" description="Descriptive text can be shown below the summary">
  Additional descriptive text is available within a
  <code>description</code>
  prop
</certara-disclosure>

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

<CertaraDisclosure summary="With description" description="Descriptive text can be shown below the summary">
  Additional descriptive text is available within a
  <code>description</code>
  prop
</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="With description" description="Descriptive text can be shown below the summary">
  Additional descriptive text is available within a
  <code>description</code>
  prop
</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>

No hover

Suppress the default hover by setting hasHover="false"

Toggle dark mode

<certara-disclosure summary="No hover" has-hover="false">
  Suppress the default hover by setting
  <code>hasHover="false"</code>
</certara-disclosure>

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

<CertaraDisclosure summary="No hover" hasHover={false}>
  Suppress the default hover by setting
  <code>hasHover="false"</code>
</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="No hover" has-hover="false">
  Suppress the default hover by setting
  <code>hasHover="false"</code>
</certara-disclosure>

Slots

Summary slot

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>

Description slot

This description has rich formatting

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

Toggle dark mode

<certara-disclosure summary="Custom description">
  <div slot="custom-description">
    This
    <code>description</code>
    has rich formatting
  </div>
  More complex formatting is available within a
  <code>slot="custom-description"</code>
  element
</certara-disclosure>

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

<CertaraDisclosure summary="Custom description">
  <div slot="custom-description">
    This
    <code>description</code>
    has rich formatting
  </div>
  More complex formatting is available within a
  <code>slot="custom-description"</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 summary="Custom description">
  <div slot="custom-description">
    This
    <code>description</code>
    has rich formatting
  </div>
  More complex formatting is available within a
  <code>slot="custom-description"</code>
  element
</certara-disclosure>

Alignment

Default (baseline)

Caret aligns to summary baseline

Toggle dark mode

<certara-disclosure summary="Default" description="Baseline alignment" align-items="baseline">
  Caret aligns to summary baseline
</certara-disclosure>

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

<CertaraDisclosure summary="Default" description="Baseline alignment" alignItems="baseline">
  Caret aligns to summary baseline
</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="Default" description="Baseline alignment" align-items="baseline">
  Caret aligns to summary baseline
</certara-disclosure>

Center

Caret aligns to summary center

Toggle dark mode

<certara-disclosure summary="Center" description="Center alignment" align-items="center">
  Caret aligns to summary center
</certara-disclosure>

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

<CertaraDisclosure summary="Center" description="Center alignment" alignItems="center">
  Caret aligns to summary center
</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="Center" description="Center alignment" align-items="center">
  Caret aligns to summary center
</certara-disclosure>

Start

Caret aligns to summary start

Toggle dark mode

<certara-disclosure summary="Start" description="Start (top) alignment" align-items="start">
  Caret aligns to summary start
</certara-disclosure>

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

<CertaraDisclosure summary="Start" description="Start (top) alignment" alignItems="start">
  Caret aligns to summary start
</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="Start" description="Start (top) alignment" align-items="start">
  Caret aligns to summary start
</certara-disclosure>

End

Caret aligns to summary end

Toggle dark mode

<certara-disclosure summary="End" description="End (bottom) alignment" align-items="end">
  Caret aligns to summary end
</certara-disclosure>

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

<CertaraDisclosure summary="End" description="End (bottom) alignment" alignItems="end">
  Caret aligns to summary end
</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="End" description="End (bottom) alignment" align-items="end">
  Caret aligns to summary end
</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

description

Attribute	description
Type	string
Default	undefined
Required	false
Description	Description text that appears below label

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-description	Slot available if description requires custom formatting
custom-summary	Slot available if summary requires custom formatting