Komponent-sandkasse
Gennemgå komponenter som rigtig, responsiv kode, før de bygges i TYPO3/Fluid. Åbn en komponent og vælg en bredde i værktøjslinjen fra mobilbredde op til desktop for at fange responsive overraskelser, som de statiske Figma-frames ikke viser.
Components
- Banner component name: Banner Fuldbredde-banner med billede, overhængende overskrift og to-kolonne layout.
- Knap component name: Button Primær og sekundær CTA med 295px default-bredde, rundet højre side og pil-ikon i cirkel. Inkl. variant med kun pil-animation på hover.
- Kort component name: Card Billedkort med etiket og pil; horisontal scroll-række med 6 kort, 3. kort med vilje skåret af.
- Medarbejderkort component name: Employee Card Billedkort med navn, titel og kontakt (tel/mail); enkeltkort og 3-kolonne grid, foto der bløder ud over kanten.
- Indgangslink component name: Entrance Link Box Ikon + label-kort med lagdelt cyan kant, der rykker op på hover; 3 kolonner over 960px.
- Accordion component name: Accordion Native details/summary, ingen JS; pil skifter retning via group-open.
- FAQ component name: Accordion List Fuldbredde blush-bånd med overskrift, billede der bløder ud bag indholdet på desktop, og en stak Accordion-komponenter. Billedet er droppet helt under 1024px.
- Hero component name: Hero Hero med logo, navigation, titel, CTA-knap og kampagne-popup; kompakt mobil-layout under 1024px.
- Relateret indhold component name: Related content Link-kort med skalerbar linktekst (18–26px); 3 kolonner over 960px, 1 under.
Global
- Navigationsmenu component name: Navigation menu 5-kolonne desktop; under 906px docker menuen til højre og viser kun niveau 1, med pil-toggle pr. kolonne.
- Footer component name: Footer 3 kolonner, logo og pencil-illustration; stabler til én kolonne under 1024px.
- Layout: Hero + Navigationsmenu component name: Hero + Navigation menu De to komponenter koblet sammen for rigtigt: burgeren i Hero'en åbner Navigationsmenuen.
Foundations
- Brødtekst component name: Body text Body text med fed, kursiv, links, punkt- og nummerlister — 65ch læsebredde.
- Typografi component name: Typography Hele typeskalaen — display, H1–H4, knap og 11 brødtekst-varianter i Parkinsans.
- Tekstside component name: Text page Lang tekst med overskrifter i klart hierarki, 1440px ydre container og 65ch læsekolonne.