BX Swiss Component Library

List Group: With Links

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.

<ul class="list-group">
    <li class="list-group__item">
        <a class="list-group__link" href="#">
                    News archive
                </a>
    </li>
    <li class="list-group__item">
        <a class="list-group__link" href="#">
                    Market calendar
                </a>
    </li>
    <li class="list-group__item">
        <a class="list-group__link" href="#">
                    Regulatory information
                </a>
    </li>
    <li class="list-group__item">
        <a class="list-group__link" href="#">
                    Reporting tool
                </a>
    </li>
</ul>
 
{{#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": [
    "News archive",
    "Market calendar",
    "Regulatory information",
    "Reporting tool"
  ],
  "hasAnchor": true
}