Menu Uno designsysteem 5.3.4

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, nobis.

  1. Lorem ipsum dolor sit amet.
  2. Quisquam animi commodi nihil temporibus sint.
  3. Toruss persuadere, tanquam peritus danista.
  4. Omnis itaque totam iste deleniti aspernatur dignissimos possimus amet id!

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.

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

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

  • Inburgeren in Nederland – index

    Home · Inburgeren: hoe moet dat. Asielmigranten; School en leren; Inburgeringsplicht; Inburgeringsexamen; Staatsexamen NT2; Geen examen doen; Meer tijd nodig; Niet op tijd klaar; Zelf verantwoordelijk. Examen doen. Participatieverklaring; Schrijven; Spreken; Luisteren; Lezen; Kennis Nederlandse Maatschappij ...

  • Inburgeren in Nederland – examen doen

    Op het inburgeringsexamen bekijkt DUO of u genoeg weet over Nederland. En of uw Nederlands goed genoeg is. Als u slaagt, krijgt u het inburgeringsdiploma. U kunt de examens het beste oefenen in Google Chrome of in Firefox. Het examen Spreken (Spreekvaardigheid) kunt u alleen oefenen in Firefox.

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