⏱️ Leestijd: ca. 5 min.

Praktische UI-componenten bouwen

Wanneer je een moderne website bekijkt, zie je zelden één gigantische, ongestructureerde pagina. In plaats daarvan is elke professionele webpagina opgebouwd uit herbruikbare UI-componenten (User Interface componenten). Denk aan legoblokjes: je ontwerpt losse, sterke elementen die je vervolgens samenvoegt tot één gestroomlijnd geheel.

In deze les stap je af van de pure theorie en ga je concreet aan de slag met de drie meest essentiële bouwstenen van vrijwel elke website:

  1. De Navigatiebalk (Navbar): Het kompas van je bezoeker.
  2. De Hero-sectie: De visuele blikvanger bovenaan de pagina.
  3. Het Card-component: De veelzijdige informatiekaart.

1. De Navigatiebalk (Navbar)

De navigatiebalk staat bijna altijd helemaal bovenaan de pagina. Het geeft de bezoeker direct overzicht en toegang tot de belangrijkste pagina's.

De Anatomie van een Navbar

Een klassieke navbar bestaat uit:

HTML-structuur

We gebruiken semantische HTML5-tags zoals <header> en <nav>:

<header class="navbar">
    <a href="#" class="logo">Studio<span>Viso</span></a>
    
    <nav class="nav-menu">
        <a href="#diensten" class="nav-link">Diensten</a>
        <a href="#portfolio" class="nav-link">Portfolio</a>
        <a href="#over" class="nav-link">Over Ons</a>
        <a href="#contact" class="btn-nav">Neem Contact Op</a>
    </nav>
</header>

CSS-styling met Flexbox

Met Flexbox lijnen we de elementen moeiteloos uit:

/* Basisstijl voor de Navbar */
.navbar {
    display: flex;
    justify-content: space-between; /* Logo uiterst links, menu uiterst rechts */
    align-items: center;            /* Verticaal perfect in het midden */
    background-color: #ffffff;
    padding: 16px 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Zachte schaduw onder de nav */
}

/* Logo styling */
.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
}

.logo span {
    color: #2563eb; /* Blauw kleuraccent */
}

/* Navigatiemenu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 24px; /* Vaste tussenruimte tussen de links */
}

.nav-link {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #2563eb;
}

/* Accentknop in de navigatie */
.btn-nav {
    background-color: #2563eb;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.btn-nav:hover {
    background-color: #1d4ed8;
}
Tip: Gebruik position: sticky; top: 0; op de .navbar als je wilt dat het menu bovenaan het scherm blijft kleven wanneer de bezoeker naar beneden scrolt!

2. De Hero-sectie (De Blikvanger)

De Hero-sectie is het eerste wat een bezoeker ziet onder de navigatiebalk. Je hebt slechts een fractie van een seconde om de aandacht te trekken. Het doel van de Hero-sectie is simpel: in één oogopslag overbrengen waar de website over gaat en de bezoeker verleiden tot een actie.

Kenmerken van een goede Hero-sectie

HTML-structuur

<section class="hero">
    <div class="hero-content">
        <h1>Ontwerp de Toekomst van het Web</h1>
        <p>Aan de slag met moderne UI/UX-principes, schone code en creatieve lay-outs. Bouw mee aan de digitale ervaring van morgen.</p>
        <div class="hero-buttons">
            <a href="#ontdek" class="btn-primary">Ontdek de Opleiding</a>
            <a href="#proefles" class="btn-secondary">Bekijk Werken</a>
        </div>
    </div>
</section>

CSS-styling

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px 20px;
    /* Subtiel kleurverloop van donkerblauw naar diepblauw */
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    color: #ffffff;
}

.hero-content {
    max-width: 750px; /* Voorkomt dat tekstregels te lang en onleesbaar worden */
}

.hero h1 {
    font-size: 3rem;
    line-height: 1.15;
    font-weight: 800;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 32px;
}

/* Knoppencontainer */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Primaire CTA knop */
.btn-primary {
    background-color: #2563eb;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px); /* Subtiele zweef-animatie */
}

/* Secondaire knop */
.btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #64748b;
    padding: 12px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.btn-secondary:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

3. Het Card-component (Informatiekaarten)

Cards zijn ongelooflijk populair in modern webdesign (denk aan Webshops, Pinterest, Netflix of NWS). Een kaart groepeert gerelateerde informatie over één specifiek onderwerp in een overzichtelijk, afgebakend kader.

Opbouw van een Card

HTML-structuur

<article class="card">
    <div class="card-image">
        <img src="[https://via.placeholder.com/400x250](https://via.placeholder.com/400x250)" alt="Webdesign Project">
        <span class="card-tag">Webdesign</span>
    </div>
    <div class="card-body">
        <h3>UI Componenten Systeem</h3>
        <p>Leer hoe je herbruikbare kaarten en knoppen ontwerpt die naadloos op elkaar aansluiten.</p>
        <a href="#" class="card-link">Lees meer &rarr;</a>
    </div>
</article>

CSS-styling

.card {
    width: 100%;
    max-width: 350px;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* Zorgt dat de afbeelding netjes de afgeronde hoeken volgt */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e2e8f0;
}

/* Hover-effect: De hele kaart "komt omhoog" bij muis-over */
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Afbeelding container */
.card-image {
    position: relative;
    width: 100%;
    height: 200px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Voorkomt dat de afbeelding vervormt */
}

/* Badge/Tag op de afbeelding */
.card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Inhoud van de kaart */
.card-body {
    padding: 24px;
}

.card-body h3 {
    font-size: 1.25rem;
    color: #0f172a;
    margin-bottom: 10px;
}

.card-body p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

.card-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}

.card-link:hover {
    color: #1d4ed8;
}
💡 Belangrijkste eigenschap: object-fit: cover;
Wanneer je afbeeldingen in een kaart laadt, hebben deze niet altijd exact dezelfde verhoudingen. Met object-fit: cover; snijdt de browser het beeld netjes bij zonder het uit te rekken!

4. Cards Combineren in een Grid

Eén losse kaart is mooi, maar meestal wil je meerdere kaarten overzichtelijk naast elkaar presenteren. Hiervoor combineren we de kaarten met Flexbox of CSS Grid:

.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

Samenvatting