Disclosure

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

Options

Basic usage

html

Copy

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

Title content

Text content

Example with longer text content

html

Copy

<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.

Content

Mixed content longer text example

html

Copy

<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.

Visual states

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

html

Copy

<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

Longer text example

html

Copy

<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

Hide arrow

html

Copy

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

Title content

Text content

Component color

html

Copy

<details class="ds-disclosure --color-magenta-bright">
  <summary>Title content</summary>
  Text content
</details>

Title content

Text content

Longer text example

html

Copy

<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

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.

html

Copy

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

Title content

Text content

Formatting the title

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

Regular text size

html

Copy

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

Title content

Text content

Large text size

html

Copy

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

Title content

Text content

Label formatting

html

Copy

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

Title content

Text content

Styles

Custom styles exist for specific use cases.

Simple style

html

Copy

<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

Examples

Custom icon, ds-rows, ds-notice and ds-field content

html

Copy

<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

Label content

Text content

Example with buttons

html

Copy

<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

Example with buttons

html

Copy

<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>