BX Swiss Component Library

List Group: Default

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 ">
    <div class="list-group__item">
        <dt>Last update</dt>
        <dd class="text-bold">18:00:15 CET</dd>
    </div>
    <div class="list-group__item">
        <dt>ISIN</dt>
        <dd class="text-bold">US88579Y1010</dd>
    </div>
    <div class="list-group__item">
        <dt>Symbol</dt>
        <dd class="text-bold">MMM-USA</dd>
    </div>
    <div class="list-group__item">
        <dt>Company information</dt>
        <dd class="text-bold"><a href='#'>www.finanzen.ch</a></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": "Last update",
      "value": "18:00:15 CET"
    },
    {
      "label": "ISIN",
      "value": "US88579Y1010"
    },
    {
      "label": "Symbol",
      "value": "MMM-USA"
    },
    {
      "label": "Company information",
      "value": "<a href='#'>www.finanzen.ch</a>"
    }
  ]
}