HOOFDSTUK 07 · UI-COMPONENTEN

UI-componenten¶

De UI-kit is een Bootstrap 5.3-bibliotheek met de huisstijl van atlascorporation.org. De CSS is de live canon (Odoo-module atlas_corp_design plus de homepage-regels), ongewijzigd hergebruikt. Elke kleur, hoek, schaduw en elk lettertype komt uit de live module. Wat de canon zelf niet stijlt (alerts, form-check, tabellen) is Bootstrap, gekoppeld aan dezelfde tokens.

Open de UI-kit Download de UI-kit (zip)

Elke pagina in de kit toont de echte componenten, met een uitklapbaar HTML-voorbeeld om te kopiëren.

Overzicht¶

Tokens, de drie lettertypen en de regels.

Open overzicht

Knoppen¶

.atlas-cta-primary (met shimmer) in drie maten, de gouden .atlas-cta-gold, ghost, tekstlink met pijl en de Bootstrap-knoppen, met hover, focus, actief en uitgeschakeld.

Open knoppen

Koppen en heroes¶

Header (desktop en mobiel, menu open), heroes met mono-eyebrow en de koppenschaal.

UI-kit: Koppen en heroes op 390 px breed

Open koppen en heroes

Kaarten¶

Odoo-kaart, chip-card met hoekmarkeringen, stap-kaarten met statusdot en blockquote.

Open kaarten

Formulieren¶

Velden, focus, validatie, uitgeschakeld, check, radio, switch en input-group.

Open formulieren

Badges en alerts¶

Badges, de gouden pil, statuschips, alerts en de cookiebalk.

UI-kit: Badges en alerts op 390 px breed

Open badges en alerts

Tabellen¶

Spec-tabel, gestreept, hover en een vergelijkingstabel met iconen.

Open tabellen

Footers¶

De live footer (desktop en mobiel) en de compacte copyrightbalk.

Open footers

Secties¶

Stat-trio, vier stappen, kaartenrij, FAQ en de CTA-band van de homepage.

Open secties

Gebruik in een gewone HTML-pagina¶

Laad de stylesheets in deze volgorde en zet de twee attributen op <html> die de canon verwacht. Zonder data-website-id="5" gebeurt er niets, want de canon-selectors beginnen daarmee.

<html lang="nl" data-website-id="5" data-bs-theme="dark">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/atlas-tokens.css">
<link rel="stylesheet" href="css/atlas-odoo-base.css">
<link rel="stylesheet" href="css/atlas-canon.css">
<link rel="stylesheet" href="css/atlas-home-live.css">
<link rel="stylesheet" href="css/atlas-spa-extras.css">
<link rel="stylesheet" href="css/atlas-kit.css">
<script src="js/bootstrap.bundle.min.js"></script>

Gebruik de klassen, niet inline stijlen: atlas-cta-primary, atlas-cta-gold, atlas-link-arrow, atlas-chip-grid en atlas-chip-card, atlas-faq-*, atlas-gold-pill, atlas-eu-kicker. Sub-merken (Works, Agency, Academy, POS) hebben een eigen thema en worden niet geharmoniseerd. Gebruik deze kit alleen op de Atlas Corporation-site.

Wat afgeleid is en niet canon¶

Alerts, form-check, tabellen en uitgeklapte states: de canon definieert ze niet zelf. De kit koppelt Bootstrap-variabelen aan canon-tokens. Statuskleuren zijn de tokens succes #2EE59D, waarschuwing #F1D38C, fout #FF5C7A en info #77A7FF.
State-weergave (.is-hover): kopieën van de echte :hover- en :focus-regels, zodat je de toestanden naast elkaar ziet.
Rand van een niet-aangevinkte checkbox: --a5-text-3, voor zichtbaarheid (WCAG 1.4.11).
De voorbeeldteksten zijn herkenbare placeholders. De drie kerncijfers (MKB, NL, EU) zijn de live homepage-feiten.

Regels¶

Geen eigen kleuren, hoeken of verlopen. Alles komt uit de tokens (--a5-* in de canon, --atlas-* in atlas-tokens.css).
Geen verzonnen reviews, klantaantallen of cijfers.
Bedrijfsgegevens in de footer: Atlas Corporation, KvK 89137868, BTW NL003660987B53, Kraaivenstraat 36-14, 5048 AB Tilburg, 085 115 5161, info@atlascorporation.org.