BX Swiss Component Library

List Group: Dotted

Default

List groups are flexible components for displaying separated list group items of any content.

Use anchors within a list group item to create clickable items with hover and active states.

Dotted

Use the dotted modifier to create a dotted separator between the list group items.

<dl class="list-group list-group--dotted">
    <div class="list-group__item">
        <dt>
                        <div class="heading heading--compact">Bid</div>
                        <span class="text-bold">CHF</span>
                    </dt>
        <dd class="heading heading--large heading--compact">
            198.930
        </dd>
    </div>
    <div class="list-group__item">
        <dt class="text-bold">Vol</dt>
        <dd class="text-bold">200</dd>
    </div>
</dl>
 
{{#if hasAnchor}}
    <ul class="list-group">
        {{#each items}}
            <li class="list-group__item">
                <a class="list-group__link" href="#">
                    {{this}}
                </a>
            </li>
        {{/each}}
    </ul>
{{else if hasHeadings}}
    <dl class="list-group {{variant}}">
        {{#each items}}
            <div class="list-group__item">
                {{#if @first}}
                    <dt>
                        <div class="heading heading--compact">{{label}}</div>
                        <span class="text-bold">CHF</span>
                    </dt>
                    <dd class="heading heading--large heading--compact">
                        {{{value}}}
                    </dd>
                {{else}}
                    <dt class="text-bold">{{label}}</dt>
                    <dd class="text-bold">{{{value}}}</dd>
                {{/if}}
            </div>
        {{/each}}
    </dl>
{{else}}
    <dl class="list-group {{variant}}">
        {{#each items}}
            <div class="list-group__item">
                <dt>{{label}}</dt>
                <dd class="text-bold">{{{value}}}</dd>
            </div>
        {{/each}}
    </dl>
{{/if}}
 
{
  "items": [
    {
      "label": "Bid",
      "value": "198.930"
    },
    {
      "label": "Vol",
      "value": "200"
    }
  ],
  "hasHeadings": true,
  "variant": "list-group--dotted"
}