Description list

Introductie

Een description list is een HTML-lijst waarin je termen en hun beschrijvingen overzichtelijk koppelt. Het wordt vaak gebruikt om definities, eigenschappen of kenmerken van iets weer te geven.

Snelstart

    
    @use "@minvws/manon/components/description-list";

Voorbeeld

Voorbeeld: Basis

Naam: Jane Doe
Woonplaats: Amsterdam
Aanmelddatum: 03-05-2021

    
    <dl>
  <div>
    <dt>Naam</dt>
    <dd>Jane Doe</dd>
  </div>

  <div>
    <dt>Woonplaats</dt>
    <dd>Amsterdam</dd>
  </div>

  <div>
    <dt>Aanmelddatum</dt>
    <dd>03-05-2021</dd>
  </div>
</dl>

Voorbeeld: Binnen een formulier

    
    <form action="" method="post" class="horizontal">
  <fieldset>
    <legend>Persoonsgegevens</legend>

    <div>
      <label>Gebruikersnaam</label>
      <div>
        <span class="nota-bene" id="voorbeeld-text-input-1-explanation"
          >Bijvoorbeeld Jane Doe
        </span>
        <input
          id="voorbeeld-text-input-1"
          name="voorbeeld-text-input-1"
          type="text"
          aria-describedby="voorbeeld-text-input-1-explanation"
        />
      </div>
    </div>

    <fieldset>
      <legend>Persoonsgegevens</legend>
      <dl>
        <div>
          <dt>Naam</dt>
          <dd>Jane Doe</dd>
        </div>
        <div>
          <dt>Geboortedatum</dt>
          <dd>01-01-1984</dd>
        </div>
        <div>
          <dt>Geslacht</dt>
          <dd>Vrouw</dd>
        </div>
        <div>
          <dt>Woonplaats</dt>
          <dd>Loremstad</dd>
        </div>
      </dl>
    </fieldset>
  </fieldset>
  <button>Lorem ipsum</button>
</form>