Iconen testpagina

Overzicht van het element in mogelijke structuren om te testen.

Tests

button

Visueel voorbeeld:

HTML-voorbeeld:

<button class="icon icon-cat">Kat</button>

button disabled

Visueel voorbeeld:

HTML-voorbeeld:

<button class="icon icon-cat" disabled>Kat</button>

States

button met een afbeelding

Visueel voorbeeld:

HTML-voorbeeld:

<button>Lorem ipsum <img src="/img/cat.svg" alt="Kat"></button>

button met een afbeelding: disabled

Visueel voorbeeld:

HTML-voorbeeld:

<button disabled>Lorem ipsum <img src="/img/cat.svg" alt="Kat"></button>

States

Link als knop

Visueel voorbeeld:

Lorem ipsum

HTML-voorbeeld:

<input class="button icon icon-cat">Lorem ipsum</a>

Link als knop icoon erachter

Visueel voorbeeld:

Lorem ipsum

HTML-voorbeeld:

<a href="{base}/components/icons/test" class="icon-after icon-cat">Lorem ipsum

States

Link als knop: met een afbeelding

Visueel voorbeeld:

Lorem ipsum Kat

HTML-voorbeeld:

<input class="button icon icon-cat">Lorem ipsum <img src="/img/cat.svg" alt="Kat" /></a>

button type="submit"

Visueel voorbeeld:

HTML-voorbeeld:

<button type="submit" class="icon icon-cat">Lorem ipsum</button>

button type="submit": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<button type="submit" value="Button disabled" class="icon icon-cat" disabled>

States

Visueel voorbeeld:

button type="reset"

Visueel voorbeeld:

HTML-voorbeeld:

<button type="reset" class="icon icon-cat">Lorem ipsum</button>

button type="reset": disabled

Visueel voorbeeld:

HTML-voorbeeld:

<button type="reset" value="Button disabled" class="icon icon-cat" disabled>

States

Visueel voorbeeld:

Link

Visueel voorbeeld:

Lorem ipsum

HTML-voorbeeld:

<a href="" class="icon icon-cat">Lorem ipsum</a>

States

Visueel voorbeeld:

Link met afbeelding als icoon

Visueel voorbeeld:

KatLorem ipsum

HTML-voorbeeld:

<a href=""><img src="/img/cat.svg" alt="Kat" class="icon">Lorem ipsum</a>

States

Visueel voorbeeld:

span

Visueel voorbeeld:

Lorem ipsum

HTML-voorbeeld:

<span class="icon icon-cat">Lorem ipsum</span>

span met afbeelding als icoon

Visueel voorbeeld:

KatLorem ipsum

HTML-voorbeeld:

<span><img src="/img/cat.svg" alt="Kat" class="icon">Lorem ipsum</span>

li

Visueel voorbeeld:

  • Lorem ipsum

HTML-voorbeeld:

<ul>
  <li class="icon icon-cat">Lorem ipsum</li>
</ul>

div

Visueel voorbeeld:

Lorem ipsum

HTML-voorbeeld:

<div class="icon icon-cat">Lorem ipsum</div>

div met afbeelding als icoon

Visueel voorbeeld:

KatLorem ipsum

HTML-voorbeeld:

<div><img src="/img/cat.svg" alt="Kat">Lorem ipsum</div>

table

Visueel voorbeeld:

Tabelvoorbeeld met actieknoppen:
Gebruikersnaam Bekijk profiel Wijzig wachtwoord Deactiveer Verwijder
Jane doe

HTML-voorbeeld:

<div class="horizontal-scroll">
 <table>
  <caption>Tabelvoorbeeld met actieknoppen:</caption>
  <thead>
    <tr>
      <th scope="col">Gebruikersnaam</th>
      <th scope="col">Bekijk profiel</th>
      <th scope="col">Wijzig wachtwoord</th>
      <th scope="col">Deactiveer</th>
      <th scope="col">Verwijder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Jane doe</td>
        <td>
            <form>
                <button type="submit" class="icon icon-cat action-button">Bekijk profiel</button>
            </form>
        </td>
        <td>
            <form>
                <button type="submit" class="icon icon-cat action-button">Wijzig wachtwoord</button>
            </form>
        </td>
        <td>
            <form>
                <button type="submit" class="icon icon-cat action-button">Deactiveer</button>
            </form>
        </td>
        <td>
            <form>
                <button type="submit" class="icon icon-cat action-button">Verwijder</button>
            </form>
        </td>
    </tr>
  </tbody>
</table>
</div>

Language selector

Visueel voorbeeld

Kies een taal:

HTML-Voorbeeld

<div class="language-selector">
  <p>Kies een taal:</p>
  <p class="visually-hidden" id="language-selector-description">Select your language</p>
  <div class="language-selector-options" aria-describedby="language-selector-description" aria-expanded="false">
    <button aria-haspopup="listbox" aria-current="true">
      Papiamentu
    </button>
    <ul role="listbox">
        <li role="option" aria-selected="false">
          <a hreflang="nl" href="#" data-value="Nederlands" lang="nl">Nederlands</a>
        </li>
        <li role="option" aria-selected="false">
          <a hreflang="en" href="#" data-value="English" lang="en">English</a>
        </li>
        <li role="option" aria-selected="false">
          <a hreflang="fy" href="#" data-value="Frysk" lang="fy">Frysk</a>
        </li>
        <li role="option" aria-selected="true" aria-current="true">
          <a hreflang="pap-CW" href="#" data-value="Papiamentu" lang="pap-CW">Papiamentu</a>
        </li>
        <li role="option" aria-selected="false">
          <a hreflang="pap-AW" href="#" data-value="Papiamento" lang="pap-AW">Papiamento</a>
        </li>
    </ul>
  </div>
</div>