Description list

Voorbeeld

Visuele weergave:

Naam

Jane Doe

Woonplaats

Amsterdam

Aanmelddatum

03-05-2021

HTML-voorbeeld:

<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>

Visuele weergave binnen formulier:

HTML-voorbeeld:

<form action="" method="post" class="horizontal-view">
  <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>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

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

Instelbare variabelen

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
  /* Description-list */
  --description-list-width: ;
  --description-list-max-width: ;

  /* Description list item */
  --description-list-item-odd-background-color: ;
  --description-list-item-gap: ;
  --description-list-item-flex-direction: ;
  --description-list-item-white-space: ;
  --description-list-item-padding: ;
  --description-list-border-width: ;
  --description-list-border-style: ;
  --description-list-border-color: ;

  /* Description list item title (dt) */
  --description-list-item-title-font-weight: ;
  --description-list-item-title-background-color: ;
  --description-list-item-title-text-color: ;
  --description-list-item-title-padding: ;
  --description-list-item-title-width: ;

  /* Description list item title (dd) */
  --description-list-item-data-background-color: ;
  --description-list-item-data-text-color: ;
  --description-list-item-data-padding: ;
  --description-list-item-data-font-weight: ;
  --description-list-item-data-width: ;
}