Een mooie kaartcomponent. Afgeronde hoeken. overflow: hidden om te voorkomen dat content buiten de hoeken valt.
Je tabt naar de link in de kaart. De focusindicator verschijnt. Maar alleen de bovenkant en onderkant. De linker- en rechterrand zijn afgeknipt door de container.
overflow: hidden op de parent verbergt alles wat buiten de container valt. Inclusief de outline van kindelementen.
/* Niet doen: overflow hidden zonder ruimte voor focus */
.kaart {
overflow: hidden;
border-radius: 8px;
}
/* Optie 1: padding voor de outline */
.kaart {
overflow: hidden;
border-radius: 8px;
padding: 4px;
}
/* Optie 2: inset box-shadow in plaats van outline */
.kaart a:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px #0066CC;
}
Optie 1 geeft de outline ruimte om binnen de container te tekenen. Optie 2 gebruikt een inset box-shadow die altijd binnen het element blijft, nooit buiten de container.
Waar komt dit voor?
- Productkaarten in webshops
- Afbeeldingsgalerijen met afgeronde hoeken
- Carrousel-slides
- Card-based layouts
Tab door je kaarten. Wordt de focusindicator overal volledig getoond?
