Iconen testpagina
Overzicht van het element in mogelijke structuren om te testen.
Tests
svg
Voorbeelden met een svg-icoon uit de tabler iconen set.
Visueel voorbeeld informatief icoon
button
Visueel voorbeeld pseudo-element op button
Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.
Visueel voorbeeld button met span
svg binnen een button
Visueel voorbeeld
button disabled
Visueel voorbeeld pseudo-element op button
Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.
Visueel voorbeeld button met span
States
- Focus:
- Active:
- Hover:
button met een afbeelding
Visueel voorbeeld:
button met een afbeelding: disabled
Visueel voorbeeld:
States
- Focus:
- Active:
- Hover:
Link als knop
Visueel voorbeeld:
Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.
Lorem ipsum InloggenLink als knop icoon erachter
Visueel voorbeeld:
Inloggensvg binnen een link
Visueel voorbeeld
InloggenStates
Link als knop: met een afbeelding
Visueel voorbeeld:
Lorem ipsum%20--%3e%3csvg%20version='1.1'%20id='Layer_1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%2025.1%2030.3'%20style='enable-background:new%200%200%2025.1%2030.3;'%20xml:space='preserve'%3e%3cpath%20d='M22.5,8.8C21.9,8.4,21,8,20.1,7.7c-0.2-3.2-0.8-7.4-2.6-7.7c-2-0.3-3.2,3.4-4.1,6.6c-1,0-2,0-3,0.1C9.3,4.3,7.5,1.1,6.1,1.5%20C4.5,1.9,4.8,5.3,5.2,8c-1,0.5-1.9,1-2.6,1.8c-2.9,2.8-2.8,7.5-2.2,10c0.6,2.9,5.2,8.6,8.2,10c1.6,0.8,7,0.7,8.7,0%20c3.3-1.4,6.4-9,6.4-9S27.5,11.8,22.5,8.8z%20M7.8,23.8c-1.1,0-1.9-1.6-1.9-3.5s0.9-3.5,1.9-3.5c1.1,0,1.9,1.6,1.9,3.5%20S8.9,23.8,7.8,23.8z%20M17.1,23.8c-1.1,0-1.9-1.6-1.9-3.5s0.9-3.5,1.9-3.5c1.1,0,1.9,1.6,1.9,3.5S18.2,23.8,17.1,23.8z'/%3e%3c/svg%3e)
pseudo-element op buttonme type="submit"
Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.
Visueel voorbeeld
button type="submit" met span
Visueel voorbeeld
pseudo-element op disabled button met type="submit"
Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.
Visueel voorbeeld
button type="submit" met span
Visueel voorbeeld
States
Visueel voorbeeld:
- Focus:
- Active:
- Hover:
pseudo-element op buttonme type="reset"
Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.
Visueel voorbeeld
button type="reset" met span
Visueel voorbeeld
pseudo-element op disabled button met type="reset"
Waarschuwing: Het voorbeeld met een pseudo-element direct op button wordt uitgefaseerd omdat het niet de voorkeur heeft omwille van toegankelijkheid. Gebruik in plaats hiervan een van de overige voorbeelden.
Visueel voorbeeld
button type="reset" met span
Visueel voorbeeld
States
Visueel voorbeeld:
- Focus:
- Active:
- Hover:
Link
Visueel voorbeeld:
Aan- of uitschakelenStates
Visueel voorbeeld:
- Default: Aan- of uitschakelen
- Focus: Aan- of uitschakelen
- Active: Aan- of uitschakelen
- Hover: Aan- of uitschakelen
- Hover visited: Aan- of uitschakelen
- Visited: Aan- of uitschakelen
Link met afbeelding als icoon
Visueel voorbeeld:
Lorem ipsum States
Visueel voorbeeld:
span
Visueel voorbeeld:
Lorem ipsumspan met svg-icoon
Visueel voorbeeld
Inloggenspan met afbeelding als icoon
Visueel voorbeeld:
Lorem ipsum li
Visueel voorbeeld:
- Lorem ipsum
div
Visueel voorbeeld:
div met afbeelding als icoon
Visueel voorbeeld:
Lorem ipsumtable
Visueel voorbeeld:
| Gebruikersnaam | Bekijk profiel | Reset | Deactiveer | Verwijder |
|---|---|---|---|---|
| Jane doe |