HOOFDSTUK 05 · KNOPPEN EN COMPONENTEN

Knoppen en componenten¶

De componenten hieronder zijn de echte bouwstenen van atlasagency.nl, één op één nagebouwd met de tokens. Op de site zijn het gewone Odoo-blokken (s_cover, s_three_columns, s_comparisons, s_process_steps, s_faq) met de klassen van de merklaag agency.scss. Die klassenamen staan onder elk voorbeeld.

Knoppen¶

Alle knoppen zijn pillen (volledig rond) in Inter Semibold. De primaire knop is inkt op Agency-blauw: dat haalt 6,8:1 contrast, wit op blauw maar 2,7:1.

Plan een gratis intake Bekijk ons werk Offerte aanvragen Direct bestellen

.btn.btn-primary.btn-lg · .aa-btn-arrow (pijl schuift 4 px bij hover) · .aa-btn-ink (omlijnd inkt, vult zich bij hover)

Plan een gratis intake Bekijk ons werk

Op inkt: .btn-primary plus .btn-outline-light (wit omlijnd op 40%, wordt wit bij hover)

Toestand	Primair	Inkt-omlijnd
Rust	achtergrond `#0EA5FF`, tekst `#0A1628`, blauwe gloed	rand 1,5 px `#0A1628`, tekst inkt
Hover	`#38B6FF`, 1 px omhoog, diepere gloed	vult zich met inkt, tekst wit
Focus	3 px rand in `#0EA5FF`, 3 px afstand	idem
Maat	groot: 0,9 x 1,6 rem, 16,3 px	klein: 6 x 16 px

Een tekstlink met pijl gebruik je voor "meer"-links onder kaarten:

Meer over branding

.aa-more (linkblauw, pijl als achtergrond)

Eyebrow en sectiekop¶

Wat we voor je maken

Zes diensten, elk met een duidelijke prijs.

Wat erin zit en wanneer het klaar is, staat erbij. Geen uurtje-factuurtje.

.aa-eyebrow · .aa-h2 · .aa-lead in .aa-head

Kaarten¶

Branding

Logo vanaf €249. Logo, huisstijl en brand guide voor €1.150.

Meer

Logo

€249excl. btw

Logo ontwerp
Bestanden voor web en print
Eén gebundelde feedbackronde

Direct bestellen

.aa-card (wit, rand 10% inkt, hoek 20 px, kaartschaduw, 4 px omhoog bij hover) · .aa-icon-tile 52 px · prijskaart met .aa-price en .aa-list

Iconen op de site zijn Font Awesome (de set die Odoo meelevert), in Agency-blauw op een tegel van 16% blauw. Geen gekleurde of 3D-iconen.

Chips en tags¶

BrandingWebsiteTilburgOdoo

.aa-chip (JetBrains Mono 11 px, mist, pil)

Stappen¶

01

KennismakingJij vertelt wat je wilt bereiken.

02

Offerte op één A4Vaste prijs, vaste deadline.

03

OntwerpOp basis van je merk en doelen.

04

Bouw en feedbackEén gebundelde ronde.

05

OpleveringLive, met beheertoegang.

.aa-steps op inkt (.aa-dark): genummerde cirkels in mono met een blauwe ring

Veelgestelde vragen¶

Wat staat er in de offerte?

Wat je krijgt, wat er niet in zit, de vaste prijs, de deadline en de betaalmomenten. Alles op één A4.

Kan ik ook direct bestellen?

Ja. Vaste producten zoals een logo, een one-pager of hosting kun je direct bestellen in de shop.

.aa-faq-item (wit, rand, hoek 16 px, ronde plus-knop in mist)

Browserframe¶

Schermafbeeldingen van werk staan altijd in een browserframe met drie stippen en de URL in mono.

kolvari.atlaspos.nl

.aa-browser + .aa-browser-bar (hoek 12 px, schaduw browser)

Formuliervelden¶

Je naamE-mail

.aa-form .form-control (hoek 12 px, rand 18% inkt, blauwe focusring)

In code¶

Alle waarden hierboven zijn tokens. Zo maak je de primaire knop buiten Odoo:

.btn-primary {
  background: var(--ag-color-blue); color: var(--ag-color-ink);
  border-radius: var(--ag-radius-pill); font-weight: 600;
  padding: .9rem 1.6rem; box-shadow: var(--ag-shadow-btn-primary);
}
.btn-primary:hover { background: var(--ag-color-blue-hover); transform: translateY(-1px); }