Skip to content

Soracom

Design System
Home Design System Elements Disclosure

Disclosure

Disclosure is for displaying an inline panel in which information is visible only when the component is toggled into an 'open' state.

dev dark-mode visual-state component-colors icon-support short-class-names

The disclosure component shares similar styling and options to notice but requires the html <details> element.

Options 

Basic usage  

<details class="ds-disclosure">
  <summary>Title content</summary>
  Text content
</details>
Title content Text content 
<details class="ds-disclosure">
  <summary>Title content</summary>
  Text content
</details>
Example with longer text content 
<details class="ds-disclosure">
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>
Title content Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<details class="ds-disclosure">
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>

Content 

Mixed content longer text example 
<details class="ds-disclosure">
  <summary>Title content</summary>  
  <h4>Aenean lacinia bibendum</h4>
  <p>Morbi leo risus, porta ac consectetur ac, <em>vestibulum at eros</em>. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. <strong>Aenean lacinia bibendum nulla</strong> sed consectetur.</p>
  <p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</details>
Title content

Aenean lacinia bibendum

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<details class="ds-disclosure">
  <summary>Title content</summary>  
  <h4>Aenean lacinia bibendum</h4>
  <p>Morbi leo risus, porta ac consectetur ac, <em>vestibulum at eros</em>. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. <strong>Aenean lacinia bibendum nulla</strong> sed consectetur.</p>
  <p>Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</details>

Visual states 

Notice adheres to the 4x preset visual states - alert, warning, success and info.

<details class="ds-disclosure --alert">
  <summary>Title content</summary>
  Text content
</details>
<details class="ds-disclosure --warning">
  <summary>Title content</summary>
  Text content
</details>
<details class="ds-disclosure --success">
  <summary>Title content</summary>
  Text content
</details>
<details class="ds-disclosure --info">
  <summary>Title content</summary>
  Text content
</details>
Title content Text content
Title content Text content
Title content Text content
Title content Text content 
<details class="ds-disclosure --alert">
  <summary>Title content</summary>
  Text content
</details>
<details class="ds-disclosure --warning">
  <summary>Title content</summary>
  Text content
</details>
<details class="ds-disclosure --success">
  <summary>Title content</summary>
  Text content
</details>
<details class="ds-disclosure --info">
  <summary>Title content</summary>
  Text content
</details>
Longer text example 
<details class="ds-disclosure --alert">
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>
Title content Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<details class="ds-disclosure --alert">
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>

Hide arrow  

<details class="ds-disclosure --hide-arrow">
  <summary>Title content</summary>
  Text content
</details>
Title content Text content 
<details class="ds-disclosure --hide-arrow">
  <summary>Title content</summary>
  Text content
</details>

Component color  

<details class="ds-disclosure --color-magenta-bright">
  <summary>Title content</summary>
  Text content
</details>
Title content Text content 
<details class="ds-disclosure --color-magenta-bright">
  <summary>Title content</summary>
  Text content
</details>
Longer text example 
<details class="ds-disclosure --color-magenta-bright">
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>
Title content Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<details class="ds-disclosure --color-magenta-bright">
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>

Icons 

To use a specific icon, use a class on the summary element such as ds-text--icon-question from the available published icon modifier list.

<details class="ds-disclosure">
  <summary class="ds-text --icon-question">Title content</summary>
  Text content
</details>
Title content Text content 
<details class="ds-disclosure">
  <summary class="ds-text --icon-question">Title content</summary>
  Text content
</details>

Formatting the title 

You can adjust the formatting of the title element by applying ds-text classes to the summary element

Regular text size 
<details class="ds-disclosure">
  <summary class="ds-text --small">Title content</summary>
  Text content
</details>
Title content Text content 
<details class="ds-disclosure">
  <summary class="ds-text --small">Title content</summary>
  Text content
</details>
Large text size 
<details class="ds-disclosure">
  <summary class="ds-text --large">Title content</summary>
  Text content
</details>
Title content Text content 
<details class="ds-disclosure">
  <summary class="ds-text --large">Title content</summary>
  Text content
</details>
Label formatting 
<details class="ds-disclosure">
  <summary class="ds-text --label">Title content</summary>
  Text content
</details>
Title content Text content 
<details class="ds-disclosure">
  <summary class="ds-text --label">Title content</summary>
  Text content
</details>

Styles 

Custom styles exist for specific use cases.

Simple style  

<details class="ds-disclosure --simple" open>
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>
Title content Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<details class="ds-disclosure --simple" open>
  <summary>Title content</summary>
  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</details>

Examples 

Custom icon, ds-rows, ds-notice and ds-field content 
<details class="ds-disclosure">
  <summary class="ds-text --label --icon-settings">Title content</summary>
    <div class="ds-notice--alert">
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="ds-field">
      <label for="sample-1" class="ds-text --label">Label content</label>
      <input id="sample-1" class="ds-input" type="text" />
      <div class="ds-text">Text content</div>
    </div>
</details>
Title content
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text content
<details class="ds-disclosure">
  <summary class="ds-text --label --icon-settings">Title content</summary>
    <div class="ds-notice--alert">
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div class="ds-field">
      <label for="sample-1" class="ds-text --label">Label content</label>
      <input id="sample-1" class="ds-input" type="text" />
      <div class="ds-text">Text content</div>
    </div>
</details>
Example with buttons 
<details class="ds-disclosure">
  <summary>Title content</summary>
  <button class="ds-button --primary --icon-online">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-settings">
    <span>Another</span>
  </button>
</details>
Title content 
<details class="ds-disclosure">
  <summary>Title content</summary>
  <button class="ds-button --primary --icon-online">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-settings">
    <span>Another</span>
  </button>
</details>
Example with buttons 
<details class="ds-disclosure">
	<summary class="ds-banner">
		<i class="ds-icon --icon-soracom-beam"></i>
		<span>
			<h3>SORACOM Beam</h3>
			<p><strong>Data transfer support</strong> - automatically encrypt transactions between the exchange and a specified destination</p>
		</span>
	</summary>
  <button class="ds-button --primary --icon-online">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-settings">
    <span>Another</span>
  </button>
</details>

SORACOM Beam

Data transfer support - automatically encrypt transactions between the exchange and a specified destination

 
<details class="ds-disclosure">
	<summary class="ds-banner">
		<i class="ds-icon --icon-soracom-beam"></i>
		<span>
			<h3>SORACOM Beam</h3>
			<p><strong>Data transfer support</strong> - automatically encrypt transactions between the exchange and a specified destination</p>
		</span>
	</summary>
  <button class="ds-button --primary --icon-online">
    <span>Button label</span>
  </button>
  <button class="ds-button --primary --icon-settings">
    <span>Another</span>
  </button>
</details>
Copyright © 2015-2024 Soracom, Inc.
Last page update: August 24, 2023
79c0802f