Lists

Voor een lijst in UNO stijl is het nodig een extra class toe te voegen aan de `ul` of `ol`.

Kolommen

Om een lijst over 2 kolommen te verdelen moet aan de <ul> / <ol> de class .columns toegevoegd worden. Kolommen worden niet ondersteund op Internet Explorer 10 of lager. Daar wordt de lijst altijd zonder kolommen getoond. Voor alle (afwijkende) lijsten is het noodzakelijk dat de base class .list wordt toegevoegd aan de ul / ol.

De volgende lijsten mogen verdeeld worden over columns:

  • ‘Standaard’ lijsten
  • .list--links
  • .list--chrevrons
  • .list--decimal

Fiscina de brevis gallus, captis bromium!

Voorbeelden

Genummerde lijst

Er zijn verschillende soorten nummering beschikbaar. Gebruik de modifiers .list--decimal en .list--decimal-circled.

decimal

  1. Fiscina de brevis gallus, captis bromium!
  2. Fiscina de brevis gallus, captis bromium!
  3. Solitudo potuss, tanquam azureus adiurator.
  4. Solitudo potuss, tanquam azureus adiurator.
  5. Solitudo potuss, tanquam azureus adiurator.
  6. Toruss persuadere, tanquam peritus danista.
  7. Toruss persuadere, tanquam peritus danista.
  8. Solitudo potuss, tanquam azureus adiurator.
  9. Toruss persuadere, tanquam peritus danista.
  10. Toruss persuadere, tanquam peritus danista.

decimal met achtergrond

  1. Fiscina de brevis gallus, captis bromium! Fiscina de brevis gallus, captis bromium! Fiscina de brevis gallus, captis bromium!
  2. Solitudo potuss, tanquam azureus adiurator.
  3. Toruss persuadere, tanquam peritus danista.

Geneste lijsten

  • Fiscina de brevis gallus, captis bromium!
  • Solitudo potuss, tanquam azureus adiurator.
    • Fiscina de brevis gallus, captis bromium!
    • Solitudo potuss, tanquam azureus adiurator.
    • Toruss persuadere, tanquam peritus danista.
  • Toruss persuadere, tanquam peritus danista.

Ongenummerde lijsten

Voor ongenummerde lijsten kan de standaard lijst gebruikt worden (zonder extra classes). Deze kan ook voor lijsten met links worden gebruikt.

Dash lijsten

Link lijsten

Voor lijsten met links in navigatie objecten. Zoals bijvoorbeeld de footer, wordt de .list--links modifier toegevoegd.

Voeg een extra .list--chevrons class toe om chevrons voor de links te plaatsen

De kleur van de bullet wordt overgenomen van de tekstkleur.

Filterlijsten

Een lijst met filterbegrippen. Gebruik voor de 100% breedte .list--filter

De filter lijst moet ook met toetsenbord bereikbaar zijn, geef de li elementen daarom een tabindex="0" zodat het element focus kan krijgen.

  • Voorbereiden
  • Bekostiging bijzonder
  • Studiefinanciering
  • Basisbeurs
  • Lesgeld

wanneer de filterbegrippen naast elkaar moeten worden getoond, voeg dan .list--filter-inline toe:

  • Voorbereiden
  • Bekostiging bijzonder
  • Studiefinanciering
  • Basisbeurs
  • Lesgeld

Onderwerpen lijst

Lijst van onderwerpen

Alle onderwerpen

  • Portaalbeheer

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

  • Onderwerp

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

  • Onderwerp

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

  • Onderwerp

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

Zoekresultaten

Benodigde stylesheets

  • /uno/components/list/list-filter.css
  • /uno/components/list/list-subject.css
  • /uno/components/list/list-search.css
  • /uno/components/lists/lists.css