Cards

Een rij cards of teasers met een titel, een afbeelding, wat tekst en een link. Je ziet ze op elke site.

Dit is de manier die je in je portfolio toepast

Flexbox, positioning, z-index en een pseudo-class, allemaal in één component. Je maakt hem in labo 5.

We vertrekken van deze HTML:

<ul class="teasers">
    <li>
        <h3>Labo 01</h3>
        <img src="..." alt="">
        <p>Webserver en tools.</p>
        <a href="./projecten/labo01">Lees meer over labo 01</a>
    </li>
    ...
</ul>

Drie problemen

1. de carden staan onder elkaar
2. de afbeelding staat onder de titel, en je (enfin, de designer) wil ze erboven
3. alleen de link is klikbaar, en dat is een te klein oppervlak

1. Naast elkaar

De ul wordt de flex container. Een lijst heeft browser defaults, dus die haal je weg, en je zet ruimte tussen de carden met gap.

.teasers {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

2. De afbeelding naar boven

In je HTML staat de afbeelding onder de titel, en daar hoort ze ook: een titel bovenaan is goede documentstructuur.

Verplaats de afbeelding niet in je HTML

Je HTML beschrijft wat de inhoud is, en de volgorde hoort bij die betekenis. Hoe het eruit ziet regel je in CSS.

Elke li wordt zelf een flex container, in kolom. Daarna geef je de afbeelding een order die lager is dan de rest.

.teasers li {
    display: flex;
    flex-direction: column;
}

.teasers img {
    order: -1;
}

3. De hele card klikbaar

De link rond de hele li zetten werkt niet: dan zit er een titel, een afbeelding en een paragraaf in je link, en een screen reader leest dat allemaal voor als linktekst.

In plaats daarvan rek je de link op met een pseudo-element. De li wordt het containing block, en het ::after van de link vult die li volledig.

.teasers li {
    position: relative;
}

.teasers a::after {
    content: "";
    position: absolute;
    inset: 0;
}

⚠️ ::after heeft content nodig

Zonder content: "" bestaat het pseudo-element niet. Zie pseudo-elements.

De inset: 0 is de shorthand voor top: 0; right: 0; bottom: 0; left: 0.
De position: relative op de li is het containing block uit positioning.

💡 Overlay link

Dit noemen we in de evaluatiecriteria een 'overlay link'.

Een tweede link in de card

probleem

Zet je er nog een link in, bijvoorbeeld naar de broncode, dan ligt het pseudo-element eroverheen en is die tweede link niet meer te klikken.

In dat geval geef je de link die je als overlay link wil gebruiken een class.
overlay-link, bijvoorbeeld.

Daarna selecteer je alle links in de card die de class overlay-link NIET heeft.
En je verhoogt de z-index van die links, zodat ze terug 'bovenaan' liggen.

.teasers li a:not(.overlay-link) {
    position: relative; /* z-index werkt enkel op gepositoineerde elementen */
    z-index: 1; 
}

Zie z-index en de :not() selector.