List

When to use it

The List component styles link list, with or without a leading header.

Variants

Add .c-list--alt to get an alternate list with a monospaced font and non-underlined links. For “bullets”, add .c-list--dots. To have a more non-dense list, add .c-list--sparse. For inline lists, add .c-list--inline.

What it looks like

Code examples

With title

<section class="c-list">
   <h2 class="c-list__title">Evenemang</h2>
   <ul>
      <li><a href="#">Lista och skapa</a></li>
      <li><a href="#">Kopiera</a></li>
      <li><a href="#">Verifiera</a></li>
   </ul>
</section>

Alternate version

<section class="c-list c-list--alt">
   <h2 class="c-list__title">Om oss</h2>
   <ul>
      <li><a href="#">Jobba på Tickster</a></li>
      <li><a href="#">Press</a></li>
      <li><a href="#">Tickster på Facebook</a></li>
   </ul>
</section>

With images

<section class="c-list">
   <ul>
      <li><svg width="32" height="32" class="c-list__image"><use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#check" /></svg><b>Kraftfullt system</b> – byggt av och för arrangörer.</li>
      <li><svg width="32" height="32" class="c-list__image"><use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#check" /></svg><b>Ingen löpande avgift</b> – säljer du inget kostar det inget.</li>
      <li><svg width="32" height="32" class="c-list__image"><use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#check" /></svg><b>Ditt varumärke främst</b> – webshop med egen grafisk profil.</li>
   </ul>
</section>

Accessibility notes

Ensure that lists are marked up semantically using <ul> for unordered lists and <ol> for ordered lists. This helps screen readers and other assistive technologies to correctly interpret and navigate the list content.