Esikatselu
<ListGroup>
<ListGroupItem>Lorem ipsum</ListGroupItem>
<ListGroupItem active>Dolor sit amet</ListGroupItem>
<ListGroupItem>Consectetur</ListGroupItem>
<ListGroupItem>Adipiscing elit</ListGroupItem>
</ListGroup>
Käyttötarkoitus
ListGroup-komponenttia käytetään erilaisten listauksien esitykseen.
Listaryhmää voidaan käyttää yksittäiseen aihealueeseen liittyvän sisällön ryhmittelyyn, helpottaen sisällön silmäiltävyyttä ja luettavuutta.
- Järjestä listan elementit johdonmukaisesti
- Käytä listauksessa vain samantyyppisiä elementtejä
Esimerkit
Lista linkeillä
<ListGroup as="div">
<ListGroupItem as="a" href="#">
Henkilöasiakkaat
</ListGroupItem>
<ListGroupItem as="a" href="#">
Työnantajat
</ListGroupItem>
<ListGroupItem as="a" href="#">
Yhteistyökumppanit
</ListGroupItem>
<ListGroupItem as="a" href="#">
Tietoa Kelasta
</ListGroupItem>
</ListGroup>
Lista painikkeilla
<ListGroup as="div">
<ListGroupItem as="button">Henkilöasiakkaat</ListGroupItem>
<ListGroupItem as="button">Työnantajat</ListGroupItem>
<ListGroupItem as="button">Yhteistyökumppanit</ListGroupItem>
<ListGroupItem as="button">Tietoa Kelasta</ListGroupItem>
</ListGroup>