Wedstrijdcentrum Foto's Lid worden Webshop

Styleguide

Overzicht van baseline Bootstrap + OKK custom componenten (Bootstrap 5.3)

Baseline (Bootstrap)

Standaard Bootstrap patronen zonder OKK-specifieke uitzonderingen.

Bootstrap

Typografie

Text

H1 Titel

H2 Titel

H3 Titel

H4 Titel

H5 Titel
H6 Titel

Paragraaf met bold, italic, underline, link, mark en inline code.

Muted / secondary text voor toelichting.

“Blockquote voor quotes of highlights.”

Buttons

Buttons

Varianten

Outline

Groottes

Alerts

Feedback

Formulieren

Forms
Helptekst / hint.

Tabellen

Tables

Standaard

Naam Status Datum Actie
Item A Actief 12-01-2026
Item B Wacht 10-01-2026
Item C Inactief 02-01-2026

Striped + hover

Kolom Waarde
A 123
B 456
C 789

Compact + bordered

Kolom Waarde
A 123
B 456

Cards & lists

Layout
Card header Nieuw

Card titel

Card content met tekst.

List group

  • Item A 12
  • Item B 3
  • Item C 7

OKK custom

Tokens, components, contexts en uitzonderingen voor OKK styling.

OKK

Tokens & basisregels

CSS

Kleuren

okk-green okk-dark okk-light okk-link

Links

Standaard: OKK link · Muted: Muted link

CSS snippet (oud)

                  :root{
                      --okk-green:#4fb051;
                      --okk-dark:#273833;
                      --okk-light:#6ccf6a;
                      --okk-link:#198754;
                    }

CSS snippet (NIEUW)

                  :root {
                      /* Brand colors (jouw huidige set) */
                      --okk-green: #4fb051;
                      --okk-dark: #273833;
                      --okk-light: #6ccf6a;
                      --okk-link: #198754;

                      /* Huisstijl extra (van Prima) */
                      --okk-green-prima: #4eab4f; /* OKK Groen */
                      --okk-dark-prima: #132621; /* Donkergroen */
                      --okk-bg-light: #ebebeb; /* Lichtgrijs achtergrond */

                      /* Typography */
                      --font-heading: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
                      --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

                      --fw-poppins-black: 800;
                      --fw-poppins-semibold: 600;
                      --fw-poppins-medium: 500;
                      --fw-body: 400;

                      --fs-heading: 28px; /* Heading size */
                      --fs-subheading: 21px; /* Subheading size */
                      --fs-body: 16px; /* Body size */

                      /* Bootstrap link tokens */
                      --bs-link-color: var(--okk-link);
                      --bs-link-hover-color: #b7b7b7;
                  }

CSS snippet (nieuw)

                  body {
                          font-family: var(--font-body);
                          font-weight: var(--fw-body);
                          font-size: var(--fs-body);
                          color: var(--okk-dark-prima); /* Prima donkergroen */
                          background-color: var(--okk-bg-light); /* Prima lichtgrijs */
                      }

                      /* Headings baseline (je kunt dit verder fine-tunen per h1/h2) */
                      h1,
                      h2,
                      h3,
                      h4,
                      h5,
                      h6 {
                          font-family: var(--font-heading);
                          color: var(--okk-dark-prima);
                      }

                      /* Prima spec: Heading */
                      h1,
                      .okk-heading {
                          font-weight: var(--fw-poppins-black);
                          font-size: var(--fs-heading);
                          line-height: 1.15;
                          color: var(--okk-dark-prima);
                      }

                      /* Prima spec: Subheading */
                      h2,
                      .okk-subheading {
                          font-weight: var(--fw-poppins-semibold);
                          font-size: var(--fs-subheading);
                          line-height: 1.2;
                          color: var(--okk-green-prima);
                      }

                      /* Links (laat jouw bestaande link-structuur intact, maar maak ‘m button-safe) */
                      a:not(.btn) {
                          color: var(--bs-link-color);
                          text-decoration: none;
                      }
                      a:not(.btn):hover {
                          color: var(--bs-link-hover-color);
                      }
                      a:not([href]):not([class]),
                      a:not([href]):not([class]):hover {
                          color: inherit;
                          text-decoration: none;
                      }

Links

Standaard: OKK link · Muted: Muted link

OKK components

Set

Section title

Standaard

Centered

OKK button styles

btn-okk btn-okk-outline btn-okk (demo)

OKK link variants

okk-link okk-link-muted

agenda-box

Agenda

za 15:30
Jongens C3 - Volley2B MC 2
De Appelgaard
za 15:30
Meiden C2 - Phoenix MC 1
De Appelgaard
za 16:00
De Burgst Breda MA 1 - Meiden A1
Sportcentrum Breda
Bekijk complete agenda

OKK button styles NEW

Bekijk Bekijk Bekijk
Bekijk

Soft card (subtiele achtergrond)

Gebruik .okk-card-soft voor blokken die nét wat zachter mogen, zonder een “donker band”-effect.

Nieuws pagination

Contexts

Contrast

Brand band (voorheen midblock): donkere sectie met betere contrastregels.

Brand band

Gebruik voor CTA’s, contactblokken, promo of “tussenstrook” op pagina’s.

Bootstrap primary (context) OKK knop Outline light

Contact

Cornelisweer 2
3371 PH Hardinxveld Giessendam
Nederland

Feature card

Een wit card element in brand-band sectie

normale link btn okk btn okk outline

Tip: Foot note

Standen (rangkleuren)

OKK component
Promotie Promotiewedstrijd Handhaving Degradatiewedstrijd Degradatie
Team Wedstrijden Punten Sets voor Sets tegen Punten voor Punten tegen
1 AVVA DS 2 11 44 35 9 1056 766
2 Volley Meerkerk'95 DS 5 9 30 24 12 849 710
3 OKK '70 DS 4 8 29 24 10 746 646
4 Atak'55 DS 4 9 28 23 15 829 776
5 Molenwiek'74 DS 1 9 24 19 17 783 777
6 Switch'89 DS 1 9 19 15 22 792 843
7 OKK '70 DS 3 8 15 13 21 738 745
8 Atak'55 DS 5 9 15 17 20 759 773
9 CVV-Spirit DS 3 10 12 11 30 735 966
10 Astrea DS 1 10 9 8 33 695 980
Laatst bijgewerkt: 23 January 2026 21:47:35

Tip: deze rijen gebruiken de classes .rank-* die je in je CSS al hebt.

Uitzonderingen

Exceptions
Regel: Alles wat project-specifiek is of “net anders” mag hier, met uitleg.

Voorbeeld: legacy class

Als je .btn-okk70 wilt houden: documenteer hem hier.

btn-okk70 vergelijk

Downloads – styleguide

Voorbeelden van download() met OKK styling (btn-okk, feature-card, wc-row).

1) Basis varianten
Card / Row / Link / Button / Minimal
Card (default)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778') ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
PDF • 498.3 KB
Download
Row
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'row']) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
PDF • 498.3 KB
Download
Link (inline)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'link']) ?>

25_26_planning_scheidsrechters_1e_helft_v1.pdf (PDF • 498.3 KB)

Button
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'label' => 'Bekijk PDF']) ?>
Bekijk PDF
Minimal (compact)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'minimal']) ?>

25_26_planning_scheidsrechters_1e_helft_v1.pdf PDF • 498.3 KB

2) Tekst en metadata
label, description, date/show_date, show_filename
Card met datum + bestandsnaam
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'card',
  'label' => 'Planning scheidsrechters (1e helft)',
  'show_date' => true,
  'show_filename' => true,
]) ?>
Planning scheidsrechters (1e helft)
PDF • 498.3 KB 11-09-2025 • 25_26_planning_scheidsrechters_1e_helft_v1.pdf
Download
Row met beschrijving
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'row',
  'label' => 'Planning scheidsrechters',
  'description' => 'Versie 1 – bijgewerkt (PDF)',
  'show_date' => true,
]) ?>
Planning scheidsrechters
PDF • 498.3 KB 11-09-2025
Versie 1 – bijgewerkt (PDF)
Download
3) Badges / grootte / extensie
size=false, badge=false, show_ext=false
Zonder badge (alleen datum/filename indien aan)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'card',
  'badge' => false,
  'show_date' => true,
  'show_filename' => true,
]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
11-09-2025 • 25_26_planning_scheidsrechters_1e_helft_v1.pdf
Download
Zonder grootte
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'row',
  'size' => false,
]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
PDF
Download
Zonder extensie
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'row',
  'show_ext' => false,
]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
498.3 KB
Download
Hele meta-regel uit
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'card',
  'show_meta' => false,
]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
Download
4) Icon opties
show_icon=false, icon override, icon_position
Geen icon
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'show_icon' => false]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
Icon override (bi-download)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'icon' => 'bi bi-download']) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
Icon rechts
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'icon_position' => 'right']) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf
5) Link gedrag
open_new_tab, rel/target, download=false (inline/open in browser)
Open in nieuwe tab
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'link', 'open_new_tab' => true]) ?>

25_26_planning_scheidsrechters_1e_helft_v1.pdf (PDF • 498.3 KB)

Inline openen (geen attachment)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'button',
  'label' => 'Open PDF',
  'download' => false
]) ?>
Open PDF
(Stuurt ?download=0 mee naar je controller)
6) Attributes & data
attrs, data (data-*)
aria-label
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'button',
  'label' => 'Download planning',
  'attrs' => ['aria-label' => 'Download planning scheidsrechters']
]) ?>
Download planning
data-* tracking
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
  'variant' => 'link',
  'data' => ['track' => 'download', 'id' => 'a8f9cac85cdf22d57e18c8dc6eec9778']
]) ?>

25_26_planning_scheidsrechters_1e_helft_v1.pdf (PDF • 498.3 KB)

7) Resolve via filename
Werkt als je DownloadService lookup op original_name ondersteunt. 
<?= download('25_26_planning_scheidsrechters_1e_helft_v1.pdf', ['variant' => 'link']) ?>

25_26_planning_scheidsrechters_1e_helft_v1.pdf (PDF • 498.3 KB)

8) Externe download
Externe download is ook beschikbaar, met url. 
<?= download([
							'url'   => 'https://cdn.nevobo.nl/files/Volley-Stars-FAQ-april-2025.pdf',
							'label' => ' 	Volley stars FAQ',
						], [
							'variant' => 'row',
							'icon'    => 'bi bi-box-arrow-up-right',
							'open_new_tab' => true,
						]) ?>

Volley stars FAQ
Download

Volley stars FAQ

Volley stars FAQ

Volley stars FAQ
Download

Einde styleguide.