Componenten · 02

Koppen

Header, mobiel menu, heroes en de koppenschaal: het kader van elke Atlas-pagina.

Header

Navbar zoals live.

De header bovenaan elke kitpagina is de echte live-header: donkere, doorschijnende balk met blur, logo, dropdown-menu, zoeken en de CTA Plan een intake. Onder 992px verschijnt het mobiele menu met offcanvas.

Header · desktop

Zie de balk bovenaan deze pagina. Markup: header#top > nav.navbar (desktop) en nav.o_header_mobile (mobiel).

Header · mobiel (390 px) en menu geopend

ATLAS CORPORATION · TILBURG, NL

Je systemen, eindelijk gekoppeld.

Webshop, winkel, voorraad en boekhouding in één dataflow rond Odoo of Exact Online. We houden wat werkt en koppelen de rest, met één aanspreekpunt in Tilburg.

Plan een intake Hoe we werken→

✓ Één aanspreekpunt✓ Europese provider [locatie TE BEVESTIGEN]✓ Tilburg · Brabant

Projectprijzen vanaf € 2.999 — bekijk tarieven →

MKB

Focus

Gevestigd

Provider (locatie TE BEVESTIGEN)

Heroes

Heroes met mono-eyebrow.

Drie hero-vormen: de homepage-hero hierboven (Earth-at-night, verloop-kop, stat-trio), de binnenpagina-hero en de gecentreerde hero.

Binnenpagina-hero (Odoo s_banner o_cc5)

Diensten

Bedrijfssoftware

Odoo, Exact, webshop en WMS gekoppeld tot één geheel.

Plan een intake

De rand is alleen voor de demo. Op een echte pagina is de hero transparent zodat de aarde doorloopt.

HTML

<section class="s_banner o_cc o_cc5 pt48 pb48" style="background:transparent;border:1px solid var(--a5-border);border-radius:5px"><div class="container"><p class="text-uppercase fw-bold">Diensten</p><h1 class="display-3">Bedrijfssoftware</h1><p class="lead">Odoo, Exact, webshop en WMS gekoppeld tot één geheel.</p><a href="#" class="btn btn-primary">Plan een intake</a></div></section>

Gecentreerde hero (.a5-hero-center)

Tarieven

Heldere prijzen per fase

Een vaste prijs per fase, vooraf afgesproken.

Bekijk tarieven

HTML

<section class="s_banner o_cc o_cc5 pt48 pb48" style="background:transparent"><div class="container a5-hero-center"><p class="text-uppercase fw-bold">Tarieven</p><h1 class="display-4">Heldere prijzen per fase</h1><p class="lead" style="max-width:56ch">Een vaste prijs per fase, vooraf afgesproken.</p><a href="#" class="btn btn-primary">Bekijk tarieven</a></div></section>

Eyebrow-varianten

SPA-kicker met lijn (.kicker)

Odoo-eyebrow (p.text-uppercase.fw-bold)

EU · Tilburg

Altijd JetBrains Mono, brand-400, 11px, letter-spacing .13-.19em.

HTML

<div class="d-flex flex-column gap-3 align-items-start"><span class="kicker">SPA-kicker met lijn (.kicker)</span><p class="text-uppercase fw-bold mb-0">Odoo-eyebrow (p.text-uppercase.fw-bold)</p><span class="atlas-eu-kicker">EU · Tilburg</span></div>

Koppenschaal

Headings en tekst.

Twee schalen bestaan naast elkaar: de Odoo-koppen (Space Grotesk 700) en de SPA-typeschaal (tokens --type-*).

Odoo-koppen

Kop 1 · Space Grotesk 700

Kop 2 · Space Grotesk 700

Kop 3 · Space Grotesk 700

Kop 4

Kop 5

Kop 6

HTML

<h1>Kop 1 · Space Grotesk 700</h1><h2>Kop 2 · Space Grotesk 700</h2><h3>Kop 3 · Space Grotesk 700</h3><h4>Kop 4</h4><h5>Kop 5</h5><h6>Kop 6</h6>

Section-title, lead en kicker

Werkwijze

Vier stappen. Geen ploftraject.

Vier stappen met een schriftelijke go/no-go na elke fase.

Titel gebruikt clamp(30px,4vw,52px) met een subtiele verloop-vulling.

HTML

<div class="section-head" style="margin:0"><span class="kicker">Werkwijze</span><h2 class="section-title">Vier stappen. Geen ploftraject.</h2><p class="section-lead">Vier stappen met een schriftelijke go/no-go na elke fase.</p></div>

SPA-typeschaal

display-xl · 700 64/1.02