Options
Basic usage
<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>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><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
<ul class="ds-list --icon-check-mark-large">
<li>Sample text</li>
<li>Sample text</li>
<li>Sample text</li>
</ul><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>Section
<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
<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
<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>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>