Card List

Component preview opent in nieuw tabblad

Cards zijn containers voor korte stukken informatie die met elkaar te maken hebben. Qua grootte en vorm lijken ze op speelkaarten. Ze hebben de volgende eigenschappen:

  • Cards zijn een visuele groep van verschillende elementen. Meestal gaat het om beeld en tekst, maar het kunnen ook andere elementen zijn.
  • Ze linken door naar aanvullende details.
  • Ze houden rekening met een flexibele indeling.
  • Ze kunnen verschillen in hoogte als de content ook verschilt. Wel is de breedte dan gelijk.

Wanneer te gebruiken

Cards passen beter in een situatie waarbij gebruikers browsen voor informatie dan wanneer ze een zoekveld gebruiken. Gebruik ze in de volgende situaties:

  • Bij interactieve content en content met veel verschillende lengtes, zoals commentaar of bijschriften.
  • Om stukken informatie visueel te groeperen, waarbij de gebruiker een actie moet ondernemen. Denk bijvoorbeeld aan een serie links waar de gebruiker op kan klikken.
  • Om een samenhangend stuk content te maken door informatie over één onderwerp te verzamelen.
  • Om content te laten zien die uit verschillende elementen bestaat.

Wanneer niet te gebruiken

Onder de volgende omstandigheden is het beter om geen cards te gebruiken:

  • Als content al als samenhangend geheel bij elkaar staat. Bijvoorbeeld bij een lijst met dezelfde producten of een fotogalerij. Cards zouden dan afleiden, teveel ruimte innemen en minder snel te bekijken zijn.
  • Als u de content in een vaste volgorde moet laten zien. Visueel hebben cards geen specifieke volgorde, waardoor het lastig is om een rangorde aan te geven.

Hoe te gebruiken

Let op de volgende dingen als u cards gebruikt:

  • Er kunnen verschillende elementen in een card staan. Zorg er wel voor dat die elementen allemaal over hetzelfde onderwerp gaan.
  • Geef elke card genoeg witruimte. Zo wordt de card goed gezien, gelezen en begrepen.
  • Zet alleen essentiΓ«le informatie in een card. Geef de gebruiker daarna een startpunt om door te klikken.
  • Maak een rangorde in de content. De belangrijkste informatie staat bovenin. Gebruik tekstopmaak om de rangorde duidelijk te maken.
  • Maak de hele card klikbaar, niet delen van de card.
  • Gebruik visuele hints en animaties om de gebruiker te laten begrijpen hoe de interactie werkt.
  • Visueel heeft de card ronde hoeken en een lichte drop shadow.

Gedrag en toegankelijkheid

  • Geef het informatieknopje het sr-onlytekstalternatief β€œtoon informatie over [titel cards]”. Zo voegt u de titel aan het tekstalternatief toe. Screenreadergebruikers snappen zo welke card bij het knopje hoort. Dat voorkomt misverstanden.

Component in context

Bronvermelding

<ul class="dso-card-list">

    <li>
        <div class="dso-card">
            <div class="dso-card-heading">
                <a href="#">
                    <h2>
                        <span>Omgevingsplan Nieuwegein</span>
                        <dso-icon icon="chevron-right"></dso-icon>
                    </h2>
                </a>

            </div>
            <div class="dso-card-content">
                <div class="dso-rich-content">
                    <p>Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
        </div>

    </li>

    <li>
        <div class="dso-card">
            <div class="dso-card-heading">
                <a href="#">
                    <h2>
                        <span>Brouwersmolen</span>
                        <dso-icon icon="chevron-right"></dso-icon>
                    </h2>
                </a>

                <div class="dso-card-interactions">

                    <div class="dso-card-interaction">
                        <button type="button" class="dso-tertiary"><span class="sr-only">Toon informatie over Brouwersmolen</span>
                            <dso-icon icon="info"></dso-icon>
                        </button>
                    </div>

                </div>

            </div>
            <div class="dso-card-content">
                <div class="dso-rich-content">
                    <p>Brouwersmolen eget iaculis nisi quam in libero.</p>
                </div>
            </div>
        </div>

    </li>

    <li>
        <div class="dso-card">
            <div class="dso-card-heading">
                <a href="#">
                    <h2>
                        <span>Brouwersmolen</span>
                        <dso-icon icon="chevron-right"></dso-icon>
                    </h2>
                </a>

                <div class="dso-card-interactions">

                    <div class="dso-card-interaction">
                        <button type="button" class="dso-tertiary"><span class="sr-only">Toon informatie over Brouwersmolen</span>
                            <dso-icon icon="info"></dso-icon>
                        </button>
                    </div>

                </div>

            </div>
            <div class="dso-card-content">
                <div class="dso-rich-content">
                    <p>Brouwersmolen eget iaculis nisi quam in libero.</p>
                </div>
            </div>
        </div>

    </li>

</ul>
<ul class="dso-card-list">
  {% for card in cards %}
    <li>
      {% render '@card', card %}
    </li>
  {% endfor %}
</ul>
cards:
  - label: Omgevingsplan Nieuwegein
    content: >-
      Gemeente Nieuwegein lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
  - label: Brouwersmolen
    content: Brouwersmolen eget iaculis nisi quam in libero.
    interactions:
      - button:
          type: button
          modifier: dso-tertiary
          icon: info
          label: Toon informatie over Brouwersmolen
          iconOnly: true
  - label: Brouwersmolen
    content: Brouwersmolen eget iaculis nisi quam in libero.
    interactions:
      - button:
          type: button
          modifier: dso-tertiary
          icon: info
          label: Toon informatie over Brouwersmolen
          iconOnly: true