Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Details

Details

Displays tabular label/value pairs of text content

Overview

The ds-details label/value columns are primarily for presenting pairs of text based content. While certain form elements can be used in value column - if all the content in the value column are form fields, they should instead use ds-field.

It is always preferable to use html dl/dt/dd elements, rather than a table/tr/td elements - table elements should only be used when multiple columns of values are required.

Options

Basic usage

Single html <dl> element with multiple children

html
Copy

Multiple html <dl> elements

html
Copy

Visual States

ds-details supports the 4x preset visual states - alert, warning, success and info.

html <dl> element with --alert visual state

html
Copy

Multiple columns

Multiple columns are only supported when using html <table> element. Available from v1.6.55+

Html <table> element

html
Copy

Column headings

Column headings are only supported when using html <table> element. Available from v1.6.55+

Html <table> element

html
Copy

Multiple html <dl> elements with footer and inline text

html
Copy

Multiple html <dl> elements with footer and button

html
Copy

HTML <table> element with tfoot and inline text

html
Copy

HTML <table> element with tfoot and button

html
Copy

Buttons

Any buttons directly inside the dd or td will be ‘appended’ to the right of the cell.

Example with buttons integrated into the table

html
Copy

To retain standard buttons styling, wrap the buttons in a div.

Example with default button style

html
Copy

Multiple buttons

Example with multiple buttons

html
Copy

Form controls

The following field components are optimised to be used directly inside ds-details:

Field

Example ds-field

html
Copy

Input

Example ds-input with 2 ds-buttons

html
Copy

Select

Example ds-select

html
Copy

Example ds-menubutton

html
Copy

Loading state

A details can be triggered to display a loading state - where the details contents are hidden, and the replaced by a centered spinning loading icon – without affecting the dimensions of the details.

Additional options are available using Message state

Default

html
Copy

Alternative loading-refresh icon

html
Copy

Custom icon by adding any icon class

html
Copy

Message state

Message state extends and can be used with Loading state. If a details has a data-attribute data-ds-message the details contents are hidden, and replaced by an icon and the text of the data-ds-message.

html
Copy

Loading state with a message

html
Copy

You can set a custom icon

html
Copy

You can set a custom icon, with the loading state animation

html
Copy

Styles

Custom styles exist for specific use cases.

Vertical style

<dl> element

html
Copy

<table> element

html
Copy

Simple style

Simple style when applied to tables uses simpler more standard rules for styling table contents and is useful for text based table contents.

<table> element

html
Copy

Plain style

<table> element

html
Copy

Tests

Using ui-edit-in-place

html
Copy

Inline error message

Example ds-field

html
Copy

Html <table> element

html
Copy

Manifest

The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-details/index.mjs

index.mjs
Copy