Icons

Deze iconen kunnen overal gebruikt worden en daar waar nodig worden overschreven met andere maten. In de broncode wordt er een sprite.svg geladen waardoor dit mogelijk is. Let wel, bij sommige elementen is het svg-stuk als achtergrond-plaatje gebrukkt in css.

<svg class="icon icon-add-user">
  <use xlink:href="/assets/img/sprite.svg#add-user"></use>
</svg>

<svg class="icon icon-arrow">
  <use xlink:href="/assets/img/sprite.svg#arrow"></use>
</svg>

<svg class="icon icon-arrow icon-arrow-left">
  <use xlink:href="/assets/img/sprite.svg#arrow"></use>
</svg>

<svg class="icon icon-check">
  <use xlink:href="/assets/img/sprite.svg#check"></use>
</svg>

<svg class="icon icon-badge">
  <use xlink:href="/assets/img/sprite.svg#badge"></use>
</svg>

<svg class="icon icon-bike-mtb">
  <use xlink:href="/assets/img/sprite.svg#bike-mtb"></use>
</svg>

<svg class="icon icon-bike-race">
  <use xlink:href="/assets/img/sprite.svg#bike-race"></use>
</svg>

<svg class="icon icon-cross">
  <use xlink:href="/assets/img/sprite.svg#cross"></use>
</svg>

<svg class="icon icon-chevron">
  <use xlink:href="/assets/img/sprite.svg#chevron"></use>
</svg>

<svg class="icon icon-download">
  <use xlink:href="/assets/img/sprite.svg#download"></use>
</svg>

<svg class="icon icon-eye">
  <use xlink:href="/assets/img/sprite.svg#eye"></use>
</svg>

<svg class="icon icon-read">
  <use xlink:href="/assets/img/sprite.svg#read"></use>
</svg>

<svg class="icon icon-menu">
  <use xlink:href="/assets/img/sprite.svg#menu"></use>
</svg>

<svg class="icon icon-plus">
  <use xlink:href="/assets/img/sprite.svg#plus"></use>
</svg>

<svg class="icon icon-user">
  <use xlink:href="/assets/img/sprite.svg#user"></use>
</svg>

<svg class="icon icon-users">
  <use xlink:href="/assets/img/sprite.svg#users"></use>
</svg>

<svg class="icon icon-search">
  <use xlink:href="/assets/img/sprite.svg#search"></use>
</svg>

<svg class="icon icon-edit">
  <use xlink:href="/assets/img/sprite.svg#edit"></use>
</svg>

<svg class="icon icon-instagram">
  <use xlink:href="/assets/img/sprite.svg#instagram"></use>
</svg>

<svg class="icon icon-facebook">
  <use xlink:href="/assets/img/sprite.svg#facebook"></use>
</svg>

<svg class="icon icon-twitter">
  <use xlink:href="/assets/img/sprite.svg#twitter"></use>
</svg>

Swiper

Dit component maakt gebruik van de Swiper plugin. De items in swiper-slide kunnen vervangen worden met elk soort component. De pijltjes voor navigatie zijn alleen te zien vanaf breakpoint lg. De titel, beschrijving, subnavigatie en link eronder zijn optioneel

Nieuws

ARTIKEL

Hoe spreid je de drukte tijdens je toertocht?

Tot en met in ieder geval 14 januari 2022 gelden er strengere coronamaatregelen. Zo zijn de 1,5 meter afstand en het mondmasker verplicht.
ARTIKEL

Hoe gaan we als vereniging veilig op pad?

Voor de sport worden de coronamaatregelen versoepeld. Zo mogen we bijvoorbeeld weer in groepsverband sporten.
ARTIKEL

Alle vragen over fietsen in coronatijd vind je hier.

Deze FAQ wordt doorlopend gewijzigd, de laatste update was op 26 januari.
ARTIKEL

Hoe spreid je de drukte tijdens je toertocht?

Tot en met in ieder geval 14 januari 2022 gelden er strengere coronamaatregelen. Zo zijn de 1,5 meter afstand en het mondmasker verplicht.
ARTIKEL

Hoe gaan we als vereniging veilig op pad?

Voor de sport worden de coronamaatregelen versoepeld. Zo mogen we bijvoorbeeld weer in groepsverband sporten.

 
<section class="swiper-container">
  <div class="mb-5">
    <h2 class="responsive-title m-0">Nieuws</h2>
  </div>
  <div class="swiper js-swiper">
    <div class="swiper-wrapper">
      <a href="#" class="swiper-slide skew-left-right">
        <div class="card h-100 z-i-1000">
          <div class="card-body">
            <span class="text-primary fw-bold">ARTIKEL</span>
            <h3 class="card-title mt-3">Hoe spreid je de drukte tijdens je toertocht?</h3>
            <p class="mt-3 mb-0">Tot en met in ieder geval 14 januari 2022 gelden er strengere coronamaatregelen. Zo zijn de 1,5 meter afstand en het mondmasker verplicht.</p>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide skew-left-right">
        <div class="card h-100 z-i-1000">
          <div class="card-body">
            <span class="text-primary fw-bold">ARTIKEL</span>
            <h3 class="card-title mt-3">Hoe gaan we als vereniging veilig op pad?</h3>
            <p class="mt-3 mb-0">Voor de sport worden de coronamaatregelen versoepeld. Zo mogen we bijvoorbeeld weer in groepsverband sporten.</p>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide skew-left-right">
        <div class="card h-100 z-i-1000">
          <div class="card-body">
            <span class="text-primary fw-bold">ARTIKEL</span>
            <h3 class="card-title mt-3">Alle vragen over fietsen in coronatijd vind je hier.</h3>
            <p class="mt-3 mb-0">Deze FAQ wordt doorlopend gewijzigd, de laatste update was op 26 januari.</p>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide skew-left-right">
        <div class="card h-100 z-i-1000">
          <div class="card-body">
            <span class="text-primary fw-bold">ARTIKEL</span>
            <h3 class="card-title mt-3">Hoe spreid je de drukte tijdens je toertocht?</h3>
            <p class="mt-3 mb-0">Tot en met in ieder geval 14 januari 2022 gelden er strengere coronamaatregelen. Zo zijn de 1,5 meter afstand en het mondmasker verplicht.</p>
          </div>
        </div>
      </a>
      <a href="#" class="swiper-slide skew-left-right">
        <div class="card h-100 z-i-1000">
          <div class="card-body">
            <span class="text-primary fw-bold">ARTIKEL</span>
            <h3 class="card-title mt-3">Hoe gaan we als vereniging veilig op pad?</h3>
            <p class="mt-3 mb-0">Voor de sport worden de coronamaatregelen versoepeld. Zo mogen we bijvoorbeeld weer in groepsverband sporten.</p>
          </div>
        </div>
      </a>
    </div>
    <div class="swiper-button-prev js-swiper-button-prev"></div>
    <div class="swiper-button-next js-swiper-button-next"></div>
  </div>
</section>

Image Card

ARTIKEL
Beleidsplan schrijven met deze 3 stappen
 
<a href="#" class="card h-100 text-decoration-none skew-left-right">
  <div class="row g-0 z-i-1000">
    <div class="col-12 bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-15 position-relative" style="background-image: url('https://picsum.photos/300/250');"></div>
    <div class="col-12">
      <div class="card-body h-100 d-flex flex-column justify-content-between">
        <div class="d-flex gap-2 align-items-start">
          <div class="flex-grow-1">
            <span class="text-primary fw-bold">ARTIKEL</span>
            <h5 class="card-title mt-2 text-dark">Beleidsplan schrijven met deze 3 stappen</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

Expert Block

Matthijs Huijbregts

Expert Toertochtorganisatie

Email Matthijs 
<div class="d-flex flex-column flex-xl-row align-items-xl-center gap-3">
  <div class="d-flex flex-grow-1">
    <div class="me-3">
      <img src="https://picsum.photos/52/52" alt="" class="rounded-circle">
    </div>
    <div class="flex-grow-1">
      <p class="fw-bold mb-0">Matthijs Huijbregts</p>
      <p class="mb-0">Expert Toertochtorganisatie</p>
    </div>
  </div>
  <a href="#" class="btn btn-dark btn-dark-skew flex-grow-0 d-block d-lg-inline-block">
    <span>Email Matthijs</span>
  </a>
</div>

Highlight

Ben jij een sportieve fietser? Maak kennis met Fietssport.

Op Fietssport.nl vind je het meest complete overzicht van toertochten en routes van wielersportbond NTFU.

Ga naar Fietssport 
<div class="row flex-lg-row-reverse g-0 h-100 bg-dark">
  <div class="col-lg bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-20 min-rm-h-lg-32 position-relative" style="background-image: url('https://picsum.photos/800/800');"></div>
  <div class="col-lg mt-lg-0 p-3 pt-0 p-lg-3 text-white align-self-center">
    <div class="p-5 text-center max-rm-w-32 mx-auto">
      <h2 class="darwin-title">Ben jij een sportieve fietser? Maak kennis met Fietssport.</h2>
      <p class="mt-3">Op Fietssport.nl vind je het meest complete overzicht van toertochten en routes van wielersportbond NTFU.</p>
      <a href="#" class="btn btn-info btn-info-skew mt-4">
        <span>Ga naar Fietssport</span>
      </a>
    </div>
  </div>
</div>

CTA Block Large

Is jouw fietsclub al lid bij de NTFU?

Lees hier alles over de voordelen van een lidmaatschap.

Lid worden 
<div class="row g-0 h-100 bg-secondary">
  <div class="col-lg bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-20 position-relative" style="background-image: url('https://picsum.photos/800/450');"></div>
  <div class="col-lg">
    <div class="p-4 p-lg-5">
      <h2>Is jouw fietsclub al lid bij de NTFU?</h2>
      <p class="mt-3 fs-4">Lees hier alles over de voordelen van een lidmaatschap.</p>
      <a href="#" class="btn btn-dark btn-dark-skew mt-4 d-block d-lg-inline-block">
        <span>Lid worden</span>
      </a>
    </div>
  </div>
</div>

CTA Block Large

In dit component is ook gebruik gemaakt van het Expert Block component met variatie.

Vragen over het organiseren van je tocht?

Onze expert staat voor je klaar!

Matthijs Huijbregts

Expert Toertochtorganisatie

Email Matthijs 
<div class="row g-0 h-100 bg-secondary">
  <div class="col-lg bg-repeat-no-repeat bg-size-cover bg-position-center min-rm-h-20 min-rm-h-lg-36 position-relative" style="background-image: url('https://picsum.photos/800/450');"></div>
  <div class="col-lg">
    <div class="p-4 p-lg-5 d-flex flex-column justify-content-between h-100 gap-5">
      <div>
        <h2>Vragen over het organiseren van je tocht?</h2>
        <p class="mt-3 fs-4">Onze expert staat voor je klaar!</p>
      </div>
      <div class="d-flex flex-column flex-xl-row align-items-xl-center gap-3">
  <div class="d-flex flex-grow-1">
    <div class="me-3">
      <img src="https://picsum.photos/52/52" alt="" class="rounded-circle">
    </div>
    <div class="flex-grow-1">
      <p class="fw-bold mb-0">Matthijs Huijbregts</p>
      <p class="mb-0">Expert Toertochtorganisatie</p>
    </div>
  </div>
  <a href="#" class="btn btn-dark btn-dark-skew flex-grow-0 d-block d-lg-inline-block">
    <span>Email Matthijs</span>
  </a>
</div>
    </div>
  </div>
</div>

Pageheader Overview

In dit component is gebruik gemaakt van de Anchor List component.

Beleid

Aenean consequat rutrum feugiat. Nulla lobortis orci in turpis vulputate rhoncus. Donec consequat risus et eros finibus consectetur. Curabitur posuere vulputate sem vel condimentum. Cras augue enim, ultricies id ex sit amet, gravida sodales elit. Cras dolor nibh, ultricies ut semper vitae, rhoncus vitae velit. Ut ultricies dignissim mauris nec vulputate.

Beleidsplan

De ALV

<div class="container-fluid p-0 bg-secondary">
  <div class="container">
    <div class="row">
      <div class="col overflow-auto align-items-center-lg me-2 me-lg-0">
        <ul class="list-inline text-nowrap d-flex gap-4 mb-0">
          <li class="list-inline-item">
            <a href="#" class="navigation-link navigation-link-subnav is-parent">
              Beleid
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav">
              Beleidsplan
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav">
              De ALV
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav">
              Privacy
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav">
              How-To
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="container py-5">
    <div class="row my-5">
      <div class="col-12 col-lg-6 mx-auto">
        <h1>Beleid</h1>
        <p class="mt-4">
          Aenean consequat rutrum feugiat. Nulla lobortis orci in turpis vulputate rhoncus. Donec consequat risus et eros finibus consectetur. Curabitur posuere vulputate sem vel condimentum. Cras augue enim, ultricies id ex sit amet, gravida sodales elit. Cras dolor nibh, ultricies ut semper vitae, rhoncus vitae velit. Ut ultricies dignissim mauris nec vulputate.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="container mt-n5">
  <div class="row">
    <div class="col">
      <div class="p-3 p-lg-5 bg-light">
        <div class="row gy-2 gy-lg-5">
          <div class="col-12 col-lg-5">
            <h4>Beleidsplan</h4>
          </div>
          <div class="col-12 col-lg-7">
            <ul class="list-unstyled anchor-list">
  <li><a href="#">Een succesvolle informatieavond organiseren</a></li>
  <li><a href="#">De ALV in coronatijden</a></li>
  <li><a href="#">Lorem ipsum</a></li>
</ul>
          </div>
          <div class="col-12 col-lg-5">
            <h4>De ALV</h4>
          </div>
          <div class="col-12 col-lg-7">
            <ul class="list-unstyled anchor-list">
  <li><a href="#">Een succesvolle informatieavond organiseren</a></li>
  <li><a href="#">De ALV in coronatijden</a></li>
  <li><a href="#">Lorem ipsum</a></li>
</ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Pageheader Detail

In dit component is ook gebruik gemaakt van de Anchor List component met variatie.

Beleidsplan

Een beleidsplan is niet alleen voor bedrijven, maar óók voor sportverenigingen heel relevant. Het geeft je als bestuur houvast en het geeft duidelijkheid aan je vereniging. Met een beleidsplan worden keuzes gemaakt op basis van een gedeeld toekomstplaatje, waardoor duidelijk is waar je als vereniging heen wilt en waar je je energie wel en niet in steekt.

Op deze pagina

<div class="container-fluid p-0 bg-secondary">
  <div class="container">
    <div class="row">
      <div class="col overflow-auto align-items-center-lg me-2 me-lg-0">
        <ul class="list-inline text-nowrap d-flex gap-4 mb-0">
          <li class="list-inline-item">
            <a href="#" class="navigation-link navigation-link-subnav is-parent">
              Beleid
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav is-current">
              Beleidsplan
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav">
              De ALV
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav">
              Privacy
            </a>
          </li>
          <li class="list-inline-item">
             <a href="#" class="navigation-link navigation-link-subnav">
              How-To
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="container py-5">
    <div class="row my-5">
      <div class="col-12 col-lg-6 mx-auto">
        <h1>Beleidsplan</h1>
        <p class="mt-4">
          Een beleidsplan is niet alleen voor bedrijven, maar óók voor sportverenigingen heel relevant. Het geeft je als bestuur houvast en het geeft duidelijkheid aan je vereniging. Met een beleidsplan worden keuzes gemaakt op basis van een gedeeld toekomstplaatje, waardoor duidelijk is waar je als vereniging heen wilt en waar je je energie wel en niet in steekt.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="container mt-n5">
  <div class="row">
    <div class="col-12 col-lg-6 mx-auto">
      <div class="p-3 p-lg-5 bg-light">
        <div class="row gy-2">
          <div class="col-12">
            <h4>Op deze pagina</h4>
          </div>
          <div class="col-12">
            <ul class="list-unstyled anchor-list anchor-list-arrow-down">
              <li><a href="#">Een succesvolle informatieavond organiseren</a></li>
              <li><a href="#">De ALV in coronatijden</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Anchor List

Op dit component kan een variatie gemaakt worden met .anchor-list-arrow-down. Zie voorbeeld bij Pageheader Detail.

<ul class="list-unstyled anchor-list">
  <li><a href="#">Een succesvolle informatieavond organiseren</a></li>
  <li><a href="#">De ALV in coronatijden</a></li>
  <li><a href="#">Lorem ipsum</a></li>
</ul>

Ordered List

  1. Sed dictum.
  2. In sit amet velit eget.
  3. Aenean pharetra suscipit.
  4. Sed dictum.
  5. In sit amet velit eget.
<ol class="ordered-list">
  <li>Sed dictum.</li>
  <li>In sit amet velit eget.</li>
  <li>Aenean pharetra suscipit.</li>
  <li>Sed dictum.</li>
  <li>In sit amet velit eget.</li>
<ol>

Bullet List

  • Aenean consequat rutrum feugiat. Nulla lobortis orci in turpis vulputate rhoncus. Donec consequat risus et eros finibus consectetur. Curabitur posuere vulputate sem vel condimentum. Cras augue enim.
  • Cras dolor nibh, ultricies ut semper vitae, rhoncus vitae velit. Ut ultricies dignissim mauris nec vulputate.
<ul class="bullet-list">
  <li>Aenean consequat rutrum feugiat. Nulla lobortis orci in turpis vulputate rhoncus. Donec consequat risus et eros finibus consectetur. Curabitur posuere vulputate sem vel condimentum. Cras augue enim.</li>
  <li>Cras dolor nibh, ultricies ut semper vitae, rhoncus vitae velit. Ut ultricies dignissim mauris nec vulputate.</li>
</ul>

Quote

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lieselot Verheye, Ontwerper bij Morrow 
<div class="quote">
  <span class="quote-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span>
  <span class="quote-author">
    Lieselot Verheye, Ontwerper bij Morrow
  </span>
</div>

Image Highlight

Fietsclub CS010 in Rotterdam 
<div class="row">
  <div class="col-12 col-lg-8 mx-auto position-relative min-rm-h-22 min-rm-h-lg-28">
    <div class="position-absolute top-0 bottom-0 start-0 end-0 bg-repeat-no-repeat bg-size-cover bg-position-center" style="background-image: url('https://picsum.photos/1600/800');"></div>
  </div>
</div>
<div class="row">
  <div class="col-12 col-lg-8 mx-auto fs-6 text-end p-lg-0">
    <span>Fietsclub CS010 in Rotterdam</span>
  </div>
</div>

Footnote

Het icoontje kan worden vervangen.

Bekijk hier de tips over het organiseren van een toertocht. 
<div class="footnote">
  <svg class="icon icon-read">
    <use xlink:href="/assets/img/sprite.svg#read"></use>
  </svg>
  <span>
    Bekijk <a href="#">hier</a> de tips over het organiseren van een toertocht.
  </span>
</div>

Buttons with skew

Voor deze knoppen is een aanvulling gemaakt waarbij de achtergrond animeert. Let op de span die nodig is. De standaard knoppen werken nog steeds: zie buttons.

<button type="button" class="btn btn-info btn-info-skew">
  <span>Info</span>
</button>
<button type="button" class="btn btn-dark btn-dark-skew">
  <span>Dark</span>
</button>

Tables

Hierbij twee voorbeelden van hoe een tabel te gebruiken, de basis vanuit Bootstrap is hiervoor gebruikt. Dit tabel is ook altijd responsive en wordt op mobiel scrollable.

Relatienummer Naam Soort Datum Email Status
#554789 Sophia Altekamp MTB 24.01.2022 sophia@morrow.nl Online
#669874 Lieselot Verheye MTB 27.03.2022 lieselot@morrow.nl Online
#558987 George Sait Race 04.01.2022 hi@georgesait.dev Offline
Toer Titel Datum Locatie Soort
Basic instructeur MTB 11.04.2022 Huizen TRAINING
Basic instructeur Wielrennen 31.12.2023 Rotterdam TRAINING
Basic instructeur MTB Geannuleerd 06.07.2021 Amsterdam TRAINING 
<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Relatienummer</th>
        <th scope="col">Naam</th>
        <th scope="col">Soort</th>
        <th scope="col">Datum</th>
        <th scope="col">Email</th>
        <th scope="col">Status</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td scope="row">#554789</td>
        <td>Sophia Altekamp</td>
        <td>MTB</td>
        <td>24.01.2022</td>
        <td><a href="#">sophia@morrow.nl</a></td>
        <td>
          <span class="text-success">Online</span>
        </td>
        <td>
          <div class="d-flex flex-nowrap justify-content-end gap-1">
            <a href="#"><svg class="icon icon-edit"><use xlink:href="/assets/img/sprite.svg#edit"></use></svg></a>
            <a href="#"><svg class="icon icon-cross"><use xlink:href="/assets/img/sprite.svg#cross"></use></svg></a>
          </div>
        </td>
      </tr>
      <tr>
        <td scope="row">#669874</td>
        <td>Lieselot Verheye</td>
        <td>MTB</td>
        <td>27.03.2022</td>
        <td><a href="#" class="d-inline">lieselot@morrow.nl</a></td>
        <td>
          <span class="text-success">Online</span>
        </td>
        <td>
          <div class="d-flex flex-nowrap justify-content-end gap-1">
            <a href="#"><svg class="icon icon-edit"><use xlink:href="/assets/img/sprite.svg#edit"></use></svg></a>
            <a href="#"><svg class="icon icon-cross"><use xlink:href="/assets/img/sprite.svg#cross"></use></svg></a>
          </div>
        </td>
      </tr>
      <tr>
        <td scope="row">#558987</td>
        <td>George Sait</td>
        <td>Race</td>
        <td>04.01.2022</td>
        <td><a href="#" class="d-inline">hi@georgesait.dev</a></td>
        <td>
          <span class="text-danger">Offline</span>
        </td>
        <td>
          <div class="d-flex flex-nowrap justify-content-end gap-1">
            <a href="#"><svg class="icon icon-edit"><use xlink:href="/assets/img/sprite.svg#edit"></use></svg></a>
            <a href="#"><svg class="icon icon-cross"><use xlink:href="/assets/img/sprite.svg#cross"></use></svg></a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Toer</th>
        <th scope="col">Titel</th>
        <th scope="col">Datum</th>
        <th scope="col">Locatie</th>
        <th scope="col">Soort</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td scope="row">
          <svg class="icon icon-bike-mtb">
            <use xlink:href="/assets/img/sprite.svg#bike-mtb"></use>
          </svg>
        </td>
        <td><span class="fw-semibold">Basic instructeur MTB</span></td>
        <td>11.04.2022</td>
        <td>Huizen</td>
        <td><span class="text-primary fw-semibold">TRAINING</span></td>
        <td>
          <div class="d-flex flex-nowrap justify-content-end gap-1">
            <a href="#">
              <svg class="icon icon-plus">
                <use xlink:href="/assets/img/sprite.svg#plus"></use>
              </svg>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td scope="row">
          <svg class="icon icon-bike-race">
            <use xlink:href="/assets/img/sprite.svg#bike-race"></use>
          </svg>
        </td>
        <td><span class="fw-semibold">Basic instructeur Wielrennen</span></td>
        <td>31.12.2023</td>
        <td>Rotterdam</td>
        <td><span class="text-primary fw-semibold">TRAINING</span></td>
        <td>
          <div class="d-flex flex-nowrap justify-content-end gap-1">
            <a href="#">
              <svg class="icon icon-plus">
                <use xlink:href="/assets/img/sprite.svg#plus"></use>
              </svg>
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td scope="row">
          <svg class="icon icon-bike-mtb">
            <use xlink:href="/assets/img/sprite.svg#bike-mtb"></use>
          </svg>
        </td>
        <td>
          <span class="fw-semibold">Basic instructeur MTB</span>
          <span class="fs-6 text-danger d-block">Geannuleerd</span>
        </td>
        <td>06.07.2021</td>
        <td>Amsterdam</td>
        <td><span class="text-primary fw-semibold">TRAINING</span></td>
        <td>
          <div class="d-flex flex-nowrap justify-content-end gap-1">
            <a href="#">
              <svg class="icon icon-plus">
                <use xlink:href="/assets/img/sprite.svg#plus"></use>
              </svg>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>