Snelle levering uit eigen voorraad
Advies van vakmensen
Scherpe prijzen
SpiroTotaal Styling & Componenten
Versie: v2025.11.27
Kleurenpalet
De vier basiskleuren van de SpiroTotaal-huisstijl met hun corresponderende variabelen en classnamen:
Orange
#f96302
.st-btn--orange
var(--st-orange)
#f96302
.st-btn--orange
var(--st-orange)
Light Blue
#34ade3
.st-btn--lblue
var(--st-blue-light)
#34ade3
.st-btn--lblue
var(--st-blue-light)
Dark Blue
#0e4a89
.st-btn--dblue
var(--st-blue-dark)
#0e4a89
.st-btn--dblue
var(--st-blue-dark)
Gray
#f9fafb
.st-btn--gray
var(--st-gray)
#f9fafb
.st-btn--gray
var(--st-gray)
Typografie
H1 – Pagina Titel
H2 – Sectie Titel
H3 – Subsectie Titel
Paragraaftekst met een voorbeeldlink. Dit toont standaard line-height, linkkleur en hovergedrag.
- Lijstitem één
- Lijstitem twee
Divider varianten
st-divider--gradient
st-divider--orange
st-divider--lblue
st-divider--dblue
st-divider--gray
Cards & Notes
st-note
Let op: informatief blok met oranje accent.
st-card
Standaard card
Een witte kaart met afgeronde hoeken en subtiele schaduw.
st-card met kleuraccenten
Oranje
Belangrijk accent.
Lichtblauw
Technisch accent.
Donkerblauw
Primair accent.
Grijs
Subtiel accent.
Chips
st-chip--*
Orange Light Blue Dark Blue Gray
Buttons
Standaard knoppen (.st-btn)
Grijze knop
Grijze knopOutline knoppen
.st-btn--outline
Ghost knoppen
.st-btn--ghost
Ghost linkknopIcon knoppen
Icon-only (.st-btn--icon)
Icon + label
Slide Buttons
.st-btn--slide
Flip Button
.st-btn--flip
Flip ButtonSubmit / Loading Buttons
.st-btn--submit
Contactknoppen (CTA blok)
.st-contact-buttons + kleurvariant
Grid varianten
st-grid (2 kolommen)
Kolom 1
Kolom 2
st-grid-3
Kolom 1
Kolom 2
Kolom 3
st-grid-center
Airflow
Volledig gecentreerd
Fan
Ideaal voor USP’s
Duct
Responsief & uitgelijnd
st-grid-5 (USP / iconen)
Item 1
Item 2
Item 3
Item 4
Item 5
st-grid-6 (compacte tegels)
Tegel 1
Tegel 2
Tegel 3
Tegel 4
Tegel 5
Tegel 6
GRID / CARD SPACING STRESS-TEST
Doel: consistentie testen tussen alle gridvarianten (1–6 kolommen)
st-grid (2 kolommen ≥ 640px)
Item 1A
Korte tekst.
Item 1B
Lange tekst om hoogteverschil te testen. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
st-grid-2
Item 2A
Kort.
Item 2B
Langere tekst voor hoogte-testing.
Item 2C
Extra item.
Item 2D
Kort.
st-grid-3
Item 3A
Kort.
Item 3B
Iets meer tekst.
Item 3C
Heel veel tekst om hoge kolommen te maken. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Item 3D
Kort.
Item 3E
Medium tekst.
Item 3F
Kort.
st-grid-4
Item 4A
Kort.
Item 4B
Meer tekst.
Item 4C
Kort.
Item 4D
Langere content voor verschil in hoogte testing.
st-grid-5
A
Kort.
B
Kort.
C
Medium tekst.
D
Veel tekst. Deze cel wordt wat hoger.
E
Kort.
st-grid-6
1
Kort.
2
Kort.
3
Lang.
4
Heel lang. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
5
Kort.
6
Kort.
GRID MIX TEST
Wisselende grids direct onder elkaar – exacte situatie zoals op jouw inhoudspagina’s
A
Kort.
B
Kort.
1
2
3
A
B
C
D
E
F
1
2
3
X
Y
Card-split 60/40
Kwaliteit & betrouwbaarheid
Onze producten voldoen aan de hoogste standaarden. Met oog voor detail en duurzaamheid leveren we oplossingen die lang meegaan.
Lees meer
Service & ondersteuning
Wij staan klaar met professioneel advies en ondersteuning, voor en na levering.
Ontdek meerCard-split compact (4 kolommen)
Card-split verticaal (6 kolommen)
Ventilatie
Krachtige en stille oplossingen.
Luchtkanalen
Flexibele componenten.
Regeltechniek
Intelligente aansturing.
Geluiddempers
Voor rust en comfort.
Roosters
Esthetisch design.
Accessoires
Voor complete montage.
1/3 – 2/3 card layout
1/3 kolom
Korte uitleg of icoonblok. Deze kolom heeft ongeveer één derde van de breedte.
2/3 kolom
Uitgebreidere content, bijvoorbeeld tekst over een categorie, USP’s of een korte handleiding.
TOC (Inhoudsopgave)
Contactknoppen
Pull-down / menu (details)
Voorbeeld “FAQ” pull-down
Gebruik van het native <details>-element (werkt zonder JavaScript):
Hoe snel leveren jullie?
Bestellingen op werkdagen vóór 16:00 uur worden doorgaans dezelfde dag verzonden.
Monteren jullie ook?
Voor zakelijke projecten kunnen we montage via partners aanbieden. Neem contact op voor mogelijkheden.
Waar vind ik documentatie?
Alle productbladen en handleidingen zijn te vinden onder het kopje “Documentatie & handleidingen”.
Tabellen
Standaard tabel (geen hover)
| Kolom 1 | Kolom 2 | Kolom 3 |
|---|---|---|
| Rij 1 | Waarde A | Details |
| Rij 2 | Waarde B | Details |
| Rij 3 | Waarde C | Details |
Tabel Hover Varianten
.st-hover--lblue (lichtblauw)
| Type | Omschrijving |
|---|---|
| Rij 1 | Lichtblauwe hover |
| Rij 2 | Lichtblauwe hover |
| Rij 3 | Lichtblauwe hover |
.st-hover--orange (oranje)
| Type | Omschrijving |
|---|---|
| Rij 1 | Oranje hover |
| Rij 2 | Oranje hover |
| Rij 3 | Oranje hover |
.st-hover--dblue (donkerblauw)
| Type | Omschrijving |
|---|---|
| Rij 1 | Donkerblauwe hover |
| Rij 2 | Donkerblauwe hover |
| Rij 3 | Donkerblauwe hover |
.st-hover--gray (grijs)
| Type | Omschrijving |
|---|---|
| Rij 1 | Grijze hover |
| Rij 2 | Grijze hover |
| Rij 3 | Grijze hover |
Tabel met horizontale scroll (.st-table-scroll + hover)
Scroll + .st-hover--gray
| Kolom 1 | Kolom 2 | Kolom 3 | Kolom 4 | Kolom 5 | Kolom 6 |
|---|---|---|---|---|---|
| Rij 1 | Waarde | Waarde | Waarde | Waarde | Waarde |
| Rij 2 | Waarde | Waarde | Waarde | Waarde | Waarde |
| Rij 3 | Waarde | Waarde | Waarde | Waarde | Waarde |
Tabellen binnen een card
Kleine tabel (oranje hover)
Deze tabel toont een compacte variant binnen een .st-card.
| Diameter | Debiet (m³/h) | Snelheid (m/s) |
|---|---|---|
| Ø 125 | 132 | 3 |
| Ø 160 | 221 | 5 |
| Ø 200 | 320 | 7 |
Tabel met scroll in card
Deze variant test horizontaal scrollen binnen een kaart.
| Kolom 1 | Kolom 2 | Kolom 3 | Kolom 4 | Kolom 5 | Kolom 6 |
|---|---|---|---|---|---|
| Rij 1 | Waarde | Waarde | Waarde | Waarde | Waarde |
| Rij 2 | Waarde | Waarde | Waarde | Waarde | Waarde |
| Rij 3 | Waarde | Waarde | Waarde | Waarde | Waarde |
© 2025 SpiroTotaal – Styling demo v2025.11.27.