Styleguide
Overzicht van baseline Bootstrap + OKK custom componenten (Bootstrap 5.3)
Baseline (Bootstrap)
Standaard Bootstrap patronen zonder OKK-specifieke uitzonderingen.
Typografie
TextH1 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.”
Alerts
FeedbackFormulieren
FormsTabellen
TablesStandaard
| 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
LayoutCard titel
Card content met tekst.
List group
- Item A 12
- Item B 3
- Item C 7
Modal
OverlayWerkt zodra Bootstrap JS bundle geladen is.
OKK custom
Tokens, components, contexts en uitzonderingen voor OKK styling.
Tokens & basisregels
CSSCSS 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
SetSection title
Standaard
Centered
agenda-box
Agenda
Soft card (subtiele achtergrond)
Gebruik .okk-card-soft voor blokken die nét wat zachter mogen,
zonder een “donker band”-effect.
Nieuws pagination
Contexts
ContrastBrand band (voorheen midblock): donkere sectie met betere contrastregels.
Brand band
Gebruik voor CTA’s, contactblokken, promo of “tussenstrook” op pagina’s.
Contact
3371 PH Hardinxveld Giessendam
Nederland
Feature card
Een wit card element in brand-band sectie
Tip: Foot note
Standen (rangkleuren)
OKK component| 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 |
Tip: deze rijen gebruiken de classes .rank-* die je in je CSS al hebt.
Uitzonderingen
ExceptionsDownloads – styleguide
Voorbeelden van download() met OKK styling (btn-okk, feature-card, wc-row).
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778') ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'row']) ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'link']) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf (PDF • 498.3 KB)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'label' => 'Bekijk PDF']) ?>
Bekijk PDF <?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'minimal']) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf PDF • 498.3 KB
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'card',
'label' => 'Planning scheidsrechters (1e helft)',
'show_date' => true,
'show_filename' => true,
]) ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'row',
'label' => 'Planning scheidsrechters',
'description' => 'Versie 1 – bijgewerkt (PDF)',
'show_date' => true,
]) ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'card',
'badge' => false,
'show_date' => true,
'show_filename' => true,
]) ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'row',
'size' => false,
]) ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'row',
'show_ext' => false,
]) ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'card',
'show_meta' => false,
]) ?>
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'show_icon' => false]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf <?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'icon' => 'bi bi-download']) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf <?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'button', 'icon_position' => 'right']) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf <?= download('a8f9cac85cdf22d57e18c8dc6eec9778', ['variant' => 'link', 'open_new_tab' => true]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf (PDF • 498.3 KB)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'button',
'label' => 'Open PDF',
'download' => false
]) ?>
Open PDF ?download=0 mee naar je controller)
<?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'button',
'label' => 'Download planning',
'attrs' => ['aria-label' => 'Download planning scheidsrechters']
]) ?>
Download planning <?= download('a8f9cac85cdf22d57e18c8dc6eec9778', [
'variant' => 'link',
'data' => ['track' => 'download', 'id' => 'a8f9cac85cdf22d57e18c8dc6eec9778']
]) ?>
25_26_planning_scheidsrechters_1e_helft_v1.pdf (PDF • 498.3 KB)
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)
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,
]) ?>