Uitzenden
Beweeg de muis hierheen: de kaart komt omhoog en de ruit draait een kwartslag.
assets/flexengo.css die de twee sites gebruiken. Wijzig je hier iets, dan verandert het overal.
Als vector overgenomen uit pagina 4 van het huisstijlhandboek — geen natekening, maar het originele pad met de originele kleurwaarden. Nooit opnieuw opbouwen in CSS of HTML: gebruik altijd een van deze bestanden.
| Bestand | Minimale breedte | Gebruik |
|---|---|---|
flexengo-logo.svg | 360 px | Volledig lockup. Alleen waar de payoff leesbaar blijft: introslides, briefpapier, grote hero. |
flexengo-logo-compact.svg | 120 px | Beeldmerk plus woordmerk. Standaard voor de sitekop en de footer. |
flexengo-mark.svg | 24 px | Alleen het beeldmerk. Favicon, app-icoon, avatar, watermerk. |
| Bestand | Formaat | Waarvoor |
|---|---|---|
flexengo-logo.png | 5499 × 1282 px, transparant | Master voor drukwerk, presentaties en e-mailhandtekeningen. |
flexengo-mark.png | 1360 × 1282 px, transparant | Basis voor favicon en social-avatars. |
Twee merkkleuren uit het huisstijlhandboek, plus een handvol afgeleiden die nodig zijn om leesbaar en toegankelijk te blijven.
#0C6F9B. Wit op blauw haalt 7,0:1 en kan overal.
Outfit, in Bold en Regular zoals het handboek voorschrijft, aangevuld met SemiBold en ExtraBold voor hiërarchie op het web. Alle formaten schalen mee met de schermbreedte, dus onderstaande waarden zijn de maxima op desktop.
Goede mensen blijven alleen als de rest klopt. Daarom regelen wij het hele plaatje, niet alleen de plaatsing: huisvesting binnen redelijke reisafstand, vervoer van en naar het werk, en Poolstalige begeleiding als er iets misgaat.
Flexibele inzet per week of per seizoen. Wij zijn werkgever, u stuurt aan op de vloer.
outfit-latin.woff2 (32 kB) en outfit-latin-ext.woff2 (15 kB). Die tweede is niet optioneel — de Poolse tekens ą ć ę ł ń ś ź ż liggen allemaal boven U+0100 en zitten alleen daar in.
font-display: swap tekent de browser eerst een vervangend lettertype en wisselt daarna om. De navigatie is precies de plek waar dat opvalt: tekstlinks naast een logo van vaste breedte verspringen zichtbaar, bij elke paginawissel. Zelf hosten haalt die wissel weg — en meteen ook het verzoek naar Google-servers.
Eén schaal voor alle afstanden. Componenten kiezen daaruit, nooit een los getal.
| Token | Waarde | Toepassing |
|---|---|---|
--fx-r-sm | 4px | Knoppen, invoervelden, kleine vlakken |
--fx-r-md | 6px | Kaarten, formulierpaneel, kruislink |
--fx-container | 1200px | Maximale inhoudsbreedte |
--fx-gutter | 20 / 32 / 40px | Zijmarge, schaalt mee met het scherm |
De ruit uit het beeldmerk keert terug door de hele site. Dat geeft samenhang zonder dat er een tweede vormtaal bij hoeft.
Foto's krijgen grijswaarden met het merkblauw eroverheen vermenigvuldigd, zoals de cover van het huisstijlhandboek. Praktisch nut: stockbeeld uit verschillende bronnen gaat er hierdoor toch als één merk uitzien.
Mobile first: de smalste layout is de basis, breedere schermen voegen kolommen toe. Er zijn maar vier breekpunten, en elk heeft een reden — geen apparaatnamen, maar het punt waarop de inhoud het zelf vraagt.
| Vanaf | Wat er verandert | Waarom daar |
|---|---|---|
560px | Formuliervelden naast elkaar in twee kolommen | Onder deze breedte wordt een half veld te smal om een bedrijfsnaam in te lezen. |
700px | Kaarten twee kolommen, cijfers op één rij, footer twee kolommen, ruimere marges | Vanaf hier past een tweede tekstkolom zonder dat regels te kort worden. |
900px | Beeld naast tekst, formulier naast introductie | Twee volwaardige kolommen naast elkaar vragen deze breedte. |
1024px | Navigatiepaneel wordt een gewone balk | Vier links, een knop en een taalwissel passen pas hier zonder te knellen. |
1000px | Kaarten drie kolommen, footer vier kolommen | Drie kaarten van minimaal 300 px plus tussenruimte. |
Tekstgroottes en marges springen niet op een breekpunt maar schalen mee met de schermbreedte. De titel hieronder is dezelfde regel CSS op elk formaat — versmal je venster en hij krimpt vloeiend mee.
Beide sites hieronder in een venster van 375 px breed — de smalste maat die er in de praktijk toe doet. Scrollen en klikken werkt gewoon.
| Regel | Waarde | Reden |
|---|---|---|
| Aanraakvlak | minimaal 48 px hoog | Knoppen, invoervelden, menu-items en accordeon-koppen. Onder die maat wordt mistikken de norm. |
| Invoerveld-tekst | 16 px | iOS zoomt automatisch in bij kleinere tekst in een formulier. Dat verspringen wil je niet. |
| Horizontaal scrollen | nooit | overflow-x: hidden op de body vangt de ruitvormen van de hero op. Brede tabellen scrollen in hun eigen kader. |
| Ankerlinks | scroll-padding-top | De vaste header mag nooit de kop verbergen waar je net naartoe sprong. |
| Regellengte | maximaal 62 tekens | Op breed scherm blijft tekst leesbaar in plaats van door te lopen tot de rand. |
Acht herbruikbare micro-animaties, allemaal opgebouwd uit dezelfde twee curves en vier tijdsduren. Ze mogen nooit iets bewijzen of vertragen — ze bevestigen alleen wat er gebeurt.
| Token | Waarde | Waarvoor |
|---|---|---|
--fx-t-1 | 150 ms | Hover en focus. Moet aanvoelen als direct. |
--fx-t-2 | 280 ms | Kleine verplaatsing: kaart omhoog, paneel open, accordeon. |
--fx-t-3 | 520 ms | Binnenkomst van een sectie. |
--fx-t-4 | 760 ms | Grote vlakken en het inzoomen van beeld. |
--fx-ease | cubic-bezier(.22,.61,.36,1) | Reactie op iets dat de bezoeker zelf deed. |
--fx-ease-out | cubic-bezier(.16,1,.3,1) | Dingen die uit zichzelf aankomen. Snelle start, lange uitloop — dat leest als duur. |
--fx-stagger | 70 ms | Vertraging tussen opeenvolgende items in een groep. |
| Naam | Wat het doet | Aanroep |
|---|---|---|
| Binnenkomst | Sectie komt 20 px omhoog en vervaagt in, eenmalig, zodra hij in beeld schuift. | data-reveal |
| Trapsgewijs | Kinderen van een groep komen 70 ms na elkaar binnen. | data-reveal-group |
| Cijfers tellen op | Kerncijfer loopt in 1,1 s naar zijn eindwaarde, eenmalig. | data-count |
| Knop licht op | 2 px omhoog met een schaduw in de merkkleur; zakt terug bij indrukken. | automatisch |
| Pijl duwt door | Het pijltje in de knop schuift 4 px vooruit. | .fx-btn--arrow |
| Ruit draait | Het icoon in een kaart draait een kwartslag — de logovorm die de muis opmerkt. | automatisch in .fx-card |
| Onderstreping | Navigatielink krijgt een streep die vanaf links binnenloopt. | automatisch |
| Beeld zoomt | Duotone foto schaalt 4,5% in bij hover over het blok. | automatisch in .fx-media |
Beweeg de muis hierheen: de kaart komt omhoog en de ruit draait een kwartslag.
prefers-reduced-motion. Zet iemand in zijn besturingssysteem bewegingseffecten uit — vaak vanwege migraine of evenwichtsklachten — dan verdwijnen alle animaties en toont de pagina meteen de eindtoestand. Nooit een lege of half opgebouwde pagina. Dat is geen extraatje: bewegingseffecten die je niet kunt uitzetten vallen onder WCAG 2.3.3 en daarmee onder de Europese toegankelijkheidsrichtlijn.
data-reveal hangt aan een js-klasse die het script zelf op de pagina zet. Laadt het script niet, dan is er niets om te onthullen en staat de pagina er gewoon.
Eén primaire knop per sectie. De witte en doorzichtige varianten bestaan alleen om op het blauwe heroblok te staan.
| Klasse | Gebruik |
|---|---|
.fx-btn--primary | De hoofdactie. Één per sectie. |
.fx-btn--outline | Nevenactie op lichte achtergrond. |
.fx-btn--white | Hoofdactie op blauw. |
.fx-btn--ghost | Nevenactie op blauw. |
.fx-btn--block | Volle breedte, gebruikt onder formulieren. |
.fx-btn--sm | In de navigatiebalk. |
Elk veld heeft een zichtbaar label — geen placeholder-als-label, want die verdwijnt zodra iemand begint te typen. Foutmeldingen staan onder het veld en zijn niet alleen aan kleur te herkennen.
Toelichting onder de knop, met link naar privacyverklaring.
form-blok verwijst alleen naar search_request of application. Zo kan niemand die teksten aanpast per ongeluk een verplicht veld of een toestemmingsvinkje weghalen.
Elk blok hieronder is één component met een vaste set velden. Pagina's bouw je door blokken te stapelen in de front matter van een MD-bestand — een nieuwe pagina is dus een nieuw contentbestand, geen nieuwe code.
Vast op elke pagina. Komt uit content/{site}/site.yml, niet uit de pagina zelf.
Hierboven staat de desktopvorm afgedwongen, zodat hij ook op een smal scherm te beoordelen is. Het echte gedrag onder 1024 px staat bij Mobiele navigatie.
# content/nl/site.yml nav: - { label: Dienstverlening, url: /dienstverlening } - { label: Werkwijze, url: /werkwijze } nav_cta: { label: Zoekopdracht plaatsen, url: /#zoekopdracht } sister_site: { label: PL, url: https://flexengo.com, lang: pl }
Openingsblok. Variant brand is het blauwe vlak; image zet er een duotone foto onder.
Flexengo bemiddelt Pools vakpersoneel voor productie, logistiek, techniek en agri.
- type: hero variant: brand # brand | image eyebrow: Flexibel talent, oneindige mogelijkheden heading: | Uw productie draait. Wij leveren de mensen. body: Flexengo bemiddelt Pools vakpersoneel … cta: { label: Zoekopdracht plaatsen, url: "#zoekopdracht" } cta_alt: { label: Bekijk onze werkwijze, url: "#werkwijze" }
Twee tot vier kerncijfers. Meer wordt onleesbaar op mobiel.
- type: stats items: - { value: "14", label: dagen van aanvraag tot start } - { value: "450+", label: flexkrachten bemiddeld } - { value: "100%", label: huisvesting en vervoer geregeld }
Diensten, sectoren, USP's. Twee kolommen op tablet, drie op desktop.
Flexibele inzet per week of per seizoen. Wij zijn werkgever, u stuurt aan op de vloer.
Een vast team met eigen coördinator op uw locatie.
Wij werven in Polen, u neemt zelf in dienst.
- type: cards background: sand eyebrow: Onze dienstverlening heading: Drie manieren om samen te werken items: - { title: Uitzenden, body: Flexibele inzet per week of per seizoen. } - { title: Inhouse, body: Een vast team met eigen coördinator. }
Genummerd proces. De nummering komt uit de volgorde, niet uit het contentbestand — hernummeren gebeurt dus vanzelf.
Binnen één werkdag nemen wij contact op.
Huisvesting en vervoer geregeld, papieren in orde.
Eén vast aanspreekpunt, begeleiding blijft doorlopen.
- type: steps eyebrow: Werkwijze heading: Van zoekopdracht naar mensen op de vloer items: - { title: U plaatst een zoekopdracht, body: Binnen één werkdag nemen wij contact op. }
Beeld naast tekst. position wisselt links en rechts, theme zet het tekstvlak op antraciet.
Goede mensen blijven alleen als de rest klopt.
- type: media_text image: media/productiehal.jpg alt: Medewerker aan een productielijn position: left # left | right theme: ink # light | ink eyebrow: Volledig ontzorgd heading: Wij regelen wat er buiten de poort gebeurt body: Goede mensen blijven alleen als de rest klopt. checklist: - Huisvesting binnen redelijke reisafstand - Vervoer van en naar het werk
Verwijst naar een formulier dat in PHP is gedefinieerd. De content bepaalt alleen de omlijsting: kop, tekst en het lijstje ernaast.
Wij nemen binnen één werkdag contact op — vrijblijvend en zonder kosten.
- type: form form: search_request # search_request | application id: zoekopdracht # ankerpunt voor links background: sand eyebrow: Zoekopdracht heading: Vertel ons wie u zoekt body: Wij nemen binnen één werkdag contact op. checklist: - Reactie binnen één werkdag
Volle-breedte oproep. Ook de plek voor een verwijzing naar de zustersite.
In tien minuten weet u of wij iets voor u kunnen betekenen.
+31 (0)541 50 00 00- type: cta_band theme: blue # blue | ink heading: Liever eerst even sparren? body: In tien minuten weet u of wij iets voor u kunnen betekenen. cta: { label: "+31 (0)541 50 00 00", url: "tel:+31541500000" }
Uitklapbaar met <details>, dus werkt ook zonder JavaScript. Levert automatisch FAQPage-markup op voor Google.
Voor de meeste functies rekenen wij op ongeveer twee weken tussen aanvraag en eerste werkdag.
Bij uitzenden en inhouse zijn wij de werkgever en dragen wij loonadministratie, verzuim en verzekeringen.
Ja, inclusief vervoer van en naar het werk.
- type: faq eyebrow: Veelgestelde vragen heading: Wat opdrachtgevers ons vragen items: - question: Hoe snel kunnen mensen starten? answer: Voor de meeste functies rekenen wij op ongeveer twee weken.
Gewone markdown. Voor de privacyverklaring, voorwaarden en alles zonder eigen vormgeving.
Wanneer u een zoekopdracht plaatst, verwerken wij uw bedrijfsnaam, contactgegevens en de omschrijving van de functie die u zoekt.
Wij bewaren aanvragen maximaal twaalf maanden, tenzij er een samenwerking uit voortkomt.
- type: prose body: | ## Welke gegevens wij verwerken Wanneer u een zoekopdracht plaatst, verwerken wij …
Trekt standaard uit site.yml, zodat adres en telefoonnummer op één plek staan.
Bel of mail gerust. Wij reageren binnen één werkdag.
- type: contact heading: Even overleggen? body: Bel of mail gerust. Wij reageren binnen één werkdag. show_map: false # kaart pas na akkoord: laadt data van derden
Keurmerken of klantlogo's. Nog niet bouwen — eerst vaststellen welke keurmerken Flexengo daadwerkelijk voert.
- type: logos heading: Aangesloten bij items: - { image: media/sna.svg, alt: SNA-keurmerk, url: https://… }
Eerlijk overzicht van wat er nog moet gebeuren voordat dit een werkende site is.
| Onderwerp | Status |
|---|---|
| Teksten en cijfers | Voorbeelden. Bronmateriaal moet nog door Flexengo aangewezen worden. |
| Poolse vertaling | Eerste versie. Eindcontrole door een Poolstalige lezer staat nog open. |
| Beeldmateriaal | Ontbreekt. Aanlevering door Flexengo of stockselectie ter goedkeuring. |
| Actieve pagina in de navigatie | aria-current is opgemaakt maar nog niet gezet — dat gebeurt straks in de Blade-layout. |
| Formulierafhandeling | Velden staan, verzending nog niet. Backend, opslag en CV-upload volgen in de bouwfase. |
| Meting | Keuze tussen een cookieloze tool of Google Analytics staat nog open. Bij Analytics komt er een consent-banner bij. |
| Beeldmateriaal | Nog geen fotografie; alle duotone-vlakken zijn plaatshouders. |