Komponent-sandkasse
Gennemgå komponenter som rigtig, responsiv kode, før de bygges i TYPO3/Fluid. Åbn en komponent og ændr browservinduets bredde fra mobil op til desktop for at fange responsive overraskelser, som de statiske Figma-frames ikke viser.
- Eksempelkort Personalekort — tilstandene standard, hover, lang tekst/overløb og tom.
- Hero Forsidehero — foto med violet kort og creme-banner. Tilstandene standard, lang tekst, uden banner og manglende billede.
- Knap Violet outline-knap med pil — to størrelser (skifter ved 1024px) og violet fyld, der kører ind fra venstre ved hover.
- Video-CTA Videoguide — stablet på mobil, overlappende kort og video på desktop. Tilstandene standard, lang overskrift, kant-variant og manglende thumbnail.
- Banner Medlemsfordele-banner med genbrugt knap-komponent — stablet på mobil (< 768px), side om side derover.
- Jobliste Ledige stillinger — 1 kolonne på mobil, 2 til 1023px, 4 derover. Genbruger knap-komponenten.
- Nyheder Nyhedsblok med masonry-layout — 1 kolonne på mobil, 2 fra 480px, 3 fra 768px. Genbruger knap-komponenten.
- Kort "Bliv klogere"-kort med billede, kicker og overskrift. Tilstandene standard, hover, lang overskrift/overløb og manglende billede, samt brug i 3- og 2-kolonne net.
- Navigation Site-header med logo, søgning og tre navigationsniveauer — fuld visning fra 1024px, hamburgermenu derunder. Tilstandene standard, hover/aktiv side, lang label/overløb og åben mobilmenu.
- Accordion FAQ-række med plus/minus-ikon — rigtig klik-for-at-folde-ud funktion. Tilstandene standard (rigtig FAQ-liste), hover, lang spørgsmål/svar og tomt svar.
- Relateret indhold Grå banner med overskrift og en række pil-links — side om side fra 1024px, stablet derunder. Genbruger pil-ikonet fra knap-komponenten.
- Info-boks Creme-panel med redaktørstyret slot til 1-3 spalter rich text — tilstandene standard (3 spalter), 1-2 spalter, lang tekst/overløb og tomt indhold.
- Link Understregning der animerer ind ved hover/fokus — brugt på overskrifter H1-H4, i brødtekst og som fritstående link, samt lang linktekst/overløb.
- Medarbejderkort Portræt, navn, titel, fagområde og telefonlinks med understregning der skifter til violet ved hover — samt eksempler med 2 og 3 kort i træk.
- Hero-test Søge-hero med søgefelt i glas-effekt over et baggrundsfoto der bevæger sig let ved scroll, plus fremhævede tags.
- Ikongitter Række af ikon-links (ikon over H4-label) der bliver violette og skalerer ikonet ved hover — med ombrydning, lange labels og ét ikon.
- Tabeller Responsive tabeller til RTE-indhold — vandret scroll med fastlåst første kolonne, eller stablede kort på mobil. Inkl. mange kolonner, tom tabel og rå RTE-markup.