Componenten
Overzicht van alle componenten in dit project: wat ze doen, welke properties en slots ze hebben en waar ze gebruikt worden.
| Component | Beschrijving | Properties | Slots | Root | Gebruik | Waar gebruikt |
|---|---|---|---|---|---|---|
| Arrangement CardArrangementCard | Kaartje voor één arrangement (afbeelding, titel, prijs) - gebruikt in de Arrangementen-grid. | Image, Content, Heading Tag, CTA | - | article | 10 | Overbergs Mooiste, De Utrechtse Heuvelrug, Happen zonder trappen, Rondje Vliegveld en 6 meer |
| Arrangementen SectionArrangementenSection v2.0.0 | Self-contained sectie: toont niets als 'ids' leeg is, anders een volledige 'Arrangementen' sectie met heading + grid van Arrangement Cards. | ids, Settings, Eyebrow, Heading, Heading Tag, Show Lede, Lede, Alignment, Actions | - | etch/condition | 1 | Home |
| Button GroupButtonGroup | - | - | - | div | 1 | Bedrijfsuitjes |
| Feature Card UniformFeatureCardUniform v1.0.0 | Losstaande feature-kaart (afbeelding + content) op basis van de solexverhuurwoudenberg.nl 'Feature Card Uniform'. Werkt als losse CTA-kaart of herhaald in een loop/grid: vanaf desktop (min-width 992px) verspringt elke tweede kaart automatisch (afbeelding links/rechts) via :nth-of-type(even), puur op basis van broer/zus-positie — geen aparte loop-wrapper nodig. | Image, Heading Tag, Title, Lede, CTA, Settings | - | article | 2 | Home, Over ons |
| Google ReviewGoogleReview v1.0.0 | Herbruikbare Google-reviewbadge (logo + label + score + sterren). Sterren vullen fractioneel via een CSS clip-path gebonden aan de Rating-prop (bv. 4.8 of 4.5), niet alleen hele/halve stappen. Class-prop default svw-google-review; overal los te plaatsen, kleur van label/waarde erft van de omliggende tekstkleur (geen hardcoded lichte tekstkleur), dus werkt op zowel donkere als lichte achtergronden. | Variant, Logo, Label, Link, Rating | - | div | 4 | Templates: alle |
| Intro HeadingIntroHeading v1.0.0 | Titel + korte introtekst (lede) voor bovenaan een sectie, met optionele eyebrow-pill en instelbare kop-tag (h1/h2/h3). | Eyebrow, Heading, Heading Tag, Show Lede, Lede, Alignment, Actions | - | div | 39 | Templates: Arrangement detail · Home, Overbergs Mooiste, De Utrechtse Heuvelrug, Happen zonder trappen en 16 meer |
| Leaflet RouteLeafletRoute | GPX-track op een LeafletMap (via data-map-target). GPX als Studio-asset: ../assets/<bestandsnaam>. | Map ID, GPX URL, Track | - | div | 7 | Overbergs Mooiste, De Utrechtse Heuvelrug, Happen zonder trappen, Rondje Vliegveld en 3 meer |
| LeafletJS v2LeafletJsV2 | - | - | - | div | 8 | Overbergs Mooiste, De Utrechtse Heuvelrug, Happen zonder trappen, Rondje Vliegveld en 4 meer |
| LeafletMap V2LeafletMapV2 | - | Show Full Screen, mapId, mapLat, mapLng, mapZoom, mapTitle, mapFitBounds, mapEnableGPX, mapProvider, mapClickCoords | - | div | 8 | Overbergs Mooiste, De Utrechtse Heuvelrug, Happen zonder trappen, Rondje Vliegveld en 4 meer |
| LeafletMarker Single v2LeafletMarkerSingleV2 | - | - | - | div | 1 | Contact |
| Logo SliderLogoSlider | Oneindige, langzaam scrollende logo-strook (Embla + AutoScroll). Werkt in Etch WP en Etch Studio. | - | - | div | 1 | Bedrijfsuitjes |
| Marker360Marker360 | - | - | - | custom-marker | 12 | Onze locatie, Voertuigen |
| MenuMenu v1.0.0 | Herbruikbaar label+values grid voor 'Menu' secties. Start op de , dus binnen een eigen section/container plaatsen. 'Items' bindt standaard aan de meta-data van soort eten, maar kan overschreven worden. 'Variant' kiest de opmaak (nu alleen Cards, uit te breiden). (Studio: items = tekst "Label: item; item" per regel of JSON, via data source labelValues) | Items, Lijst (kant-en-klaar, bijv. uit data source), Variant | - | ul | 2 | Templates: Arrangement detail |
| Menu DropdownMenuDropdown | Uitklapmenu (dropdown) voor een item in de hoofdnavigatie. | Dropdown Class, Dropdown Tag, Dropdown Label, Activation Method, Mark as Mega Menu, Match Width, Hide at Menu Breakpoint, Dropdown Content Tag | dropdownContent | etch/dynamic-element | 8 | Templates: alle |
| Menu LinkMenuLink1 | Eén link in de hoofdnavigatie. | List Item Class, Label, Link URL, Open Link in New Tab, Hide at Menu Breakpoint | - | li | 40 | Templates: alle |
| Menu WrapperMenuWrapper | Wrapper voor het hele navigatiemenu; bevat de Menu Links en -Dropdowns. | Menu Class, Desktop Settings, Mobile Settings | menuContent | div | 4 | Templates: alle |
| Overlap Hero CardOverlapHeroCard v1.0.0 | Losstaande 'overlap hero'-kaart (headline + lede + optionele CTA + afbeelding die overlapt in een 12-koloms grid). Zelfde props-opzet als Feature Card Uniform (Image, Heading Tag, Title, Lede, CTA-group, Settings-group). Plaats binnen een section/container structuur, geen eigen section/container inbegrepen. | - | - | div | 2 | Info reserveren, Over ons |
| Post CardPostCard | Kaartje voor een blogbericht (afbeelding, titel, samenvatting) - gebruikt in het blogoverzicht. | image, title, excerpt, link | - | article | 1 | Home |
| Practical InfoPracticalInfo v1.0.0 | Herbruikbaar label+values lijstje voor 'Practical Info' secties. Start op de , dus binnen een eigen section/container plaatsen. 'Items' bindt standaard aan de meta-data van praktische info, maar kan overschreven worden. 'Variant' kiest de opmaak (uit te breiden). (Studio: items = tekst "Label: waarde; waarde" per regel of JSON, via data source labelValues) | Items, Variant | - | ul | 1 | Templates: Arrangement detail |
| Pricelist ArrangementsPricelistArrangements v1.1.0 | Prijslijst voor een arrangement. Toggle 'Show Vehicle Prices' om te wisselen tussen een prijslijst per voertuig (basisprijs + surcharge) of één vaste prijsregel (surcharge als losstaande prijs). | Surcharge, Show Vehicle Prices, Price Unit | - | div | 1 | Templates: Arrangement detail |
| Recras BoekprocesRecrasBoekproces | Officieel Recras book process (via de Recras-omgeving). Werkt in Etch WP en Etch Studio. | Recras URL, Boekproces-ID | - | div | 2 | Templates: Arrangement detail · Boeken |
| Recras ContactformulierRecrasContactformulier | Recras contactformulier via de officiele Recras Integration Library. Werkt in Etch WP en Etch Studio. | Recras hostname, Formulier-ID, Taal, Redirect-URL na verzenden (optioneel, volledige URL) | - | div | 4 | Templates: Arrangement detail · Bedrijfsuitjes, Info reserveren, Contact |
| Route CardRouteCard | Kaartje voor één route (afbeelding, titel, afstand) - gebruikt in de Routes-grid. | Image, Content, Heading Tag, CTA | - | article | 2 | Templates: Arrangement detail · Routes |
| Route HeroRouteHero | Hero voor routedetailpagina: titel, intro, afstand, GPX-download, navigatieapp en foto. Defaults lezen het huidige route-item (this). | Heading, Lede, Distance Text, Image, GPX URL, Nav App URL, Nav App Label | - | section | 7 | Overbergs Mooiste, De Utrechtse Heuvelrug, Happen zonder trappen, Rondje Vliegveld en 3 meer |
| Routes SectionRoutesSection v2.0.0 | Self-contained sectie: toont niets als 'ids' leeg is, anders een volledige 'Routes' sectie met heading + grid van Route Cards. | ids, Settings, Eyebrow, Heading, Heading Tag, Show Lede, Lede, Alignment, Actions | - | etch/condition | 1 | Home |
| SN FAQsSnFaQs | Uitklapbare FAQ-lijst (accordion). | Source, Loop Fields, Static Fields, Title, Settings, Classes | - | div | 1 | Home |
| Testimonial CardTestimonialCard | - | - | - | article | 0 | Niet gebruikt |
| Toggle ButtonToggleButton | Knop om het mobiele menu open/dicht te klappen. | Selectors, Aria Label, Target element is a modal?, Label Type, Has Labels, Icon Type, Has Custom Icon, Freeze Body Scroll | - | button | 8 | Templates: alle |
| Viewer360 WrapperViewer360Wrapper | - | - | default | div | 2 | Onze locatie, Voertuigen |