Skip to content
MENU

Soracom

Design System

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
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Multiple html <dl> elements
<div class="ds-details">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-details">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>

Visual States 

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

html <dl> element with --alert visual state
<dl class="ds-details--alert">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details--alert">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

Multiple columns 

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

Html <table> element
<table class="ds-details">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-details">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>

Column headings 

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

Html <table> element
<table class="ds-details">
  <thead>
    <tr>
      <th></th>
      <th>Item A</th>
      <th>Item B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
  </tbody>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-details">
  <thead>
    <tr>
      <th></th>
      <th>Item A</th>
      <th>Item B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
    <tr>
      <th>Label</th>
      <td>
        <div>Value</div>
      </td>
      <td>
        <div>Value</div>
      </td>
    </tr>
  </tbody>
</table>

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
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

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

Example with default button style
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <div>
      <button class="ds-button --icon-edit --hide-label">
        <span>Edit</span>
      </button>
    </div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <div>
      <button class="ds-button --icon-edit --hide-label">
        <span>Edit</span>
      </button>
    </div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example with --addon-light buttons
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --addon-light --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --addon-light --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example with primary button style
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --primary --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --primary --icon-edit --hide-label">
      <span>Edit</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

Multiple buttons 

Example with multiple buttons
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <div>Morbi leo risus, porta ac consectetur ac.</div>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

Fields 

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

Example ds-input with 2 ds-buttons
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <input type="text" name="test" class="ds-input" value="Value"/>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <input type="text" name="test" class="ds-input" value="Value"/>
    <button class="ds-button --icon-cancel --hide-label">
      <span>Cancel</span>
    </button>
    <button class="ds-button --icon-confirm --hide-label">
      <span>Confirm</span>
    </button>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example ds-select
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <select class="ds-select" id="example-2" name="example">
      <option label="Australia" value="AU">Australia</option>
      <option label="Japan" value="JP">Japan</option>
      <option label="United States of America" value="US">United States of America</option>
    </select>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <select class="ds-select" id="example-2" name="example">
      <option label="Australia" value="AU">Australia</option>
      <option label="Japan" value="JP">Japan</option>
      <option label="United States of America" value="US">United States of America</option>
    </select>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Example ds-menubutton
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --plain --right-icon --icon-settings">
          <span>Button label</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --plain --right-icon --icon-settings">
          <span>Button label</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>

Loading state 

Available from v1.7.9+

When a table has the the class ds-details--loading any content inside the table is not visible and the loading state animation is shown.

Loading state using --loading icon
<dl class="ds-details--loading">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details--loading">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
Loading state using --loading-refresh icon
<div class="ds-details--loading-refresh">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-details--loading-refresh">
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
  <dl>
    <dt>Label</dt>
    <dd>
      <div>Value</div>
    </dd>
  </dl>
</div>
Using ui-edit-in-place
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <ui-edit-in-place>
      <div>
        <ui-span>
          <span>
            <ui-text-content>
              <span class="">s</span>
            </ui-text-content>
          </span>
        </ui-span>
        <button class="ds-button --hide-label --icon-edit">
          <span>Edit</span>
        </button>
      </div>
    </ui-edit-in-place>
  </dd>
  <dt>Label</dt>
  <dd>
    <ui-edit-in-place>
      <div>
        <input class="ds-input" type="text" placeholder="Description" />
        <button class="ds-button --hide-label --icon-confirm --success">
          <span>Save</span>
        </button>
        <button class="ds-button --hide-label --icon-cancel">
          <span>Cancel</span>
        </button>
      </div>
    </ui-edit-in-place>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details">
  <dt>Label</dt>
  <dd>
    <ui-edit-in-place>
      <div>
        <ui-span>
          <span>
            <ui-text-content>
              <span class="">s</span>
            </ui-text-content>
          </span>
        </ui-span>
        <button class="ds-button --hide-label --icon-edit">
          <span>Edit</span>
        </button>
      </div>
    </ui-edit-in-place>
  </dd>
  <dt>Label</dt>
  <dd>
    <ui-edit-in-place>
      <div>
        <input class="ds-input" type="text" placeholder="Description" />
        <button class="ds-button --hide-label --icon-confirm --success">
          <span>Save</span>
        </button>
        <button class="ds-button --hide-label --icon-cancel">
          <span>Cancel</span>
        </button>
      </div>
    </ui-edit-in-place>
  </dd>
</dl>

Styles 

Custom styles exist for specific use cases.

Vertical style 

<dl> element
<dl class="ds-details--vertical">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<dl class="ds-details--vertical">
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
  <dt>Label</dt>
  <dd>
    <div>Value</div>
  </dd>
</dl>
<table> element
<table class="ds-details--vertical">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-details--vertical">
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
  <tr>
    <th>Label</th>
    <td>
      <div>Value</div>
    </td>
    <td>
      <div>Value</div>
    </td>
  </tr>
</table>

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
<table class="ds-details--simple">
  <tbody>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
  </tbody>
</table>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<table class="ds-details--simple">
  <tbody>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
      <th>Label</th>
      <td>Value</td>
      <td>Value</td>
    </tr>
  </tbody>
</table>