Skip to content

Soracom

Design System
Home Design System Elements List

List

Options 

Basic usage 

<ul class="ds-list">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>

By default, the contents of each list item are arranged in columns.

For rich text (containing em strong a etc), you should wrap the text in a span or div.

<ul class="ds-list">
  <li>
    <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>
  </li>
  <li>
    <div>
      <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>
    </div>
  </li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list">
  <li>
    <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>
  </li>
  <li>
    <div>
      <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>
    </div>
  </li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>

Indent 

Supports the global indent options --indent-*, --v-indent-*, --h-indent-*, --no-indent, --no-v-indent, --no-h-indent at all sizes (xxhuge, xhuge, huge, xxlarge, xlarge, large, medium, small, xsmall, xxsmall).

<ul class="ds-list --indent-medium">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list --indent-medium">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
<ul class="ds-list --no-h-indent">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list --no-h-indent">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>

Icons 

Set the same icon for all list items
<ul class="ds-list --icon-check-mark-large">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list --icon-check-mark-large">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
Set the same icon for all list items
<ul class="ds-list">
  <li class="--icon-sun">Sample text</li>
  <li class="--icon-rocket">Sample text</li>
  <li class="--icon-moon">Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list">
  <li class="--icon-sun">Sample text</li>
  <li class="--icon-rocket">Sample text</li>
  <li class="--icon-moon">Sample text</li>
</ul>

Styles 

Lined 

<ul class="ds-list --lined">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list --lined">
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>

Section 

<ul class="ds-list">
  <li>Sample text</li>
  <li class="--section">Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list">
  <li>Sample text</li>
  <li class="--section">Sample text</li>
  <li>Sample text</li>
  <li>Sample text</li>
</ul>

Drag 

Supports the global __drag options.

Basic example 

Minimal example which would require javascript to implement drag and drop
<div class="ds-rows --gap-small">
  <div class="ds-text --small --label">Columns</div>
  <ul class="ds-list --no-h-indent">
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-rows --gap-small">
  <div class="ds-text --small --label">Columns</div>
  <ul class="ds-list --no-h-indent">
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
    <li>
      <span class="__drag"></span>
      <span>Text</span>
    </li>
  </ul>
</div>

Using html draggable and aria 

Example using html draggable and aria attributes
<div hidden id="desc-1">draggable</div>
<ul class="ds-list --no-h-indent">
  <li draggable="true" aria-describedby="desc-1">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
  <li draggable="true" aria-describedby="desc-1">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
  <li draggable="true" aria-describedby="desc-1">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
  <li draggable="false">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div hidden id="desc-1">draggable</div>
<ul class="ds-list --no-h-indent">
  <li draggable="true" aria-describedby="desc-1">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
  <li draggable="true" aria-describedby="desc-1">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
  <li draggable="true" aria-describedby="desc-1">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
  <li draggable="false">
    <span class="__drag" aria-hidden="true"></span>
    <span>Text</span>
  </li>
</ul>

Examples 

Drag with switches and buttons 

<div hidden id="desc-2">draggable</div>
<ul class="ds-list --no-h-indent">
  <li draggable="true" aria-describedby="desc-2">
    <span class="__drag" aria-hidden="true"></span>
    <label class="ds-switch --xsmall">
      <input type="checkbox" checked>
      <span>Name</span>
    </label>
  </li>
  <li draggable="true" aria-describedby="desc-2">
    <span class="__drag" aria-hidden="true"></span>
    <label class="ds-switch --xsmall">
      <input type="checkbox" checked>
      <span>Type</span>
    </label>
  </li>
  <li draggable="false">
    <span class="__drag" aria-hidden="true"></span>
    <label class="ds-switch --xsmall">
      <input type="checkbox" checked>
      <span>Text</span>
    </label>
  </li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div hidden id="desc-2">draggable</div>
<ul class="ds-list --no-h-indent">
  <li draggable="true" aria-describedby="desc-2">
    <span class="__drag" aria-hidden="true"></span>
    <label class="ds-switch --xsmall">
      <input type="checkbox" checked>
      <span>Name</span>
    </label>
  </li>
  <li draggable="true" aria-describedby="desc-2">
    <span class="__drag" aria-hidden="true"></span>
    <label class="ds-switch --xsmall">
      <input type="checkbox" checked>
      <span>Type</span>
    </label>
  </li>
  <li draggable="false">
    <span class="__drag" aria-hidden="true"></span>
    <label class="ds-switch --xsmall">
      <input type="checkbox" checked>
      <span>Text</span>
    </label>
  </li>
</ul>

Lined, with sections, radio buttons with tags 

<ul class="ds-list --lined">
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="0" checked="" class="--icon-tick">
      <div>No license applied to this device</div>
      <div class="ds-tag --small --info --end"><span>Current</span></div>
    </label>
  </li>
  <li class="--section">
    <label class="ds-radio">
      <input type="radio" name="license" value="1">
      <div>Cloud Recording License (7 Days)</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="2" disabled="">
      <div>Cloud Recording License (14 Days)</div>
      <div class="ds-tag --small --muted --end">No license available</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="3" disabled="">
      <div>Cloud Recording License (30 Days)</div>
      <div class="ds-tag --small --muted --end">No license available</div>
    </label>
  </li>
  <li class="--section">
    <label class="ds-radio">
      <input type="radio" name="license" value="4">
      <div>Cloud Motion Detection "Unlimited" Recording License (7 Days)</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="5">
      <div>Cloud Motion Detection "Unlimited" Recording License (14 Days)</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="6" disabled="">
      <div>Cloud Motion Detection "Unlimited" Recording License (30 Days)</div>
      <div class="ds-tag --small --muted --end">No license available</div>
    </label>
  </li>
</ul>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<ul class="ds-list --lined">
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="0" checked="" class="--icon-tick">
      <div>No license applied to this device</div>
      <div class="ds-tag --small --info --end"><span>Current</span></div>
    </label>
  </li>
  <li class="--section">
    <label class="ds-radio">
      <input type="radio" name="license" value="1">
      <div>Cloud Recording License (7 Days)</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="2" disabled="">
      <div>Cloud Recording License (14 Days)</div>
      <div class="ds-tag --small --muted --end">No license available</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="3" disabled="">
      <div>Cloud Recording License (30 Days)</div>
      <div class="ds-tag --small --muted --end">No license available</div>
    </label>
  </li>
  <li class="--section">
    <label class="ds-radio">
      <input type="radio" name="license" value="4">
      <div>Cloud Motion Detection "Unlimited" Recording License (7 Days)</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="5">
      <div>Cloud Motion Detection "Unlimited" Recording License (14 Days)</div>
    </label>
  </li>
  <li>
    <label class="ds-radio">
      <input type="radio" name="license" value="6" disabled="">
      <div>Cloud Motion Detection "Unlimited" Recording License (30 Days)</div>
      <div class="ds-tag --small --muted --end">No license available</div>
    </label>
  </li>
</ul>