import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as e,o as t}from"./app-h9l50wZ_.js";const a={};function l(d,s){return t(),n("div",null,s[0]||(s[0]=[e(`<h2 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h2><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-list&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>&lt;/ds-list&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="ordered-list" tabindex="-1"><a class="header-anchor" href="#ordered-list"><span>Ordered list</span></a></h2><p>Use an ordered list to display a sorted set of items.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-list ordered&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>&lt;/ds-list&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="custom-icon" tabindex="-1"><a class="header-anchor" href="#custom-icon"><span>Custom icon</span></a></h2><p>Provide a custom icon for the list items.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-list icon=&quot;user&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>&lt;/ds-list&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="sizes" tabindex="-1"><a class="header-anchor" href="#sizes"><span>Sizes</span></a></h2><p>Use different sizes to create hierarchy.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-list size=&quot;x-large&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>&lt;/ds-list&gt;</span></span>
<span class="line"><span>&lt;ds-list size=&quot;large&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>&lt;/ds-list&gt;</span></span>
<span class="line"><span>&lt;ds-list size=&quot;base&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>&lt;/ds-list&gt;</span></span>
<span class="line"><span>&lt;ds-list size=&quot;small&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>
<span class="line"><span>&lt;/ds-list&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,11)]))}const o=i(a,[["render",l],["__file","demo.html.vue"]]),r=JSON.parse('{"path":"/styleguide/src/system/components/data-display/List/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Ordered list","slug":"ordered-list","link":"#ordered-list","children":[]},{"level":2,"title":"Custom icon","slug":"custom-icon","link":"#custom-icon","children":[]},{"level":2,"title":"Sizes","slug":"sizes","link":"#sizes","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.8,"words":240},"filePathRelative":"styleguide/src/system/components/data-display/List/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Basic usage</h2>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span>&lt;ds-list&gt;</span></span>\\n<span class=\\"line\\"><span>  &lt;ds-list-item&gt;Layout components&lt;/ds-list-item&gt;</span></span>\\n<span class=\\"line\\"><span>  &lt;ds-list-item&gt;Typography components&lt;/ds-list-item&gt;</span></span>\\n<span class=\\"line\\"><span>  &lt;ds-list-item&gt;Navigation components&lt;/ds-list-item&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;/ds-list&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{o as comp,r as data};
