Komponentbibliotek

Temaflater

Temaet settes med Theme-egenskapen på Section-komponenten — aldri som en variant. Legg merke til at primærknappen blir mørkerød på Tint, og hvit på Brand.

Merkefarger

Seks farger bærer hele nettstedet. Styr alltid fra theme-laget, ikke fra en rå hex — da følger fargen temaet.

Fire håndtegnede markeringer

Alle fire er søsken av samme familie: en overskrift med en rød håndtegnet strek. Marken males med currentColor fra theme/heading-accent, og males i em av overskriftens egen fontstørrelse — så den følger både temaet og typeskalaen automatisk.

Viktig for gjenbruk: plasseringen av marken er finjustert mot den teksten som står der nå. Endrer du overskriften, treffer streken feil ord og må flyttes. Bytt derfor helst bare enkeltord av samme lengde — eller be om ny innmaling.

Heading Scribble

Krusedull over ett ord. Bygget på en Typography Heading, så overskriftsnivået settes i verktøylinjen.

Heading Swash

Håndtegnet understrek som hugger siste linje. Malt fra font-size/h2.

Heading Circle

Rød ellipse-ring rundt ett ord.

Heading Underline

Ren enkel understrek under siste ord. Den eneste av de fire som publiserer en ekte h2 — de tre andre går gjennom Typography Heading og trenger et valg i verktøylinjen for å få riktig nivå.

Om kortene

Hvert kort under er en ekte komponent med sine egne standardverdier. De fleste er festet til en temamodus (Light, Tint eller Brand) så de beholder fargen sin uansett hvilken flate de står på. Bytt innhold via egenskapene i høyre panel — ikke ved å bryte opp komponenten.

Article Card

Aktuelt-kort: foto, tittel og «Les artikkelen». CMS-klar — hvert felt er en egenskap. Rosa panel på alle flater. Har også en Featured-variant for det uthevede kortet på /aktuelt.

Klar for folkefest på Evje: Altifiber Cup sparker i gang fotballsesongen

Les artikkelen

Community Card

Lokalt initiativ: 401/219 foto over et rosa panel med h3 og brødtekst. Ingen metarad, ingen CTA. Bruk denne som utgangspunkt hvis du trenger et nytt kort i samme familie.

Navn på lokalt initiativ

Kort beskrivelse av det lokale initiativet.

Event Card

Arrangementkort: samme som Community Card, pluss en metarad med dato og sted og en «Les mer»-lenke. Hvitt kort på det rosa båndet.

Altifiber Cup

25. april

Evje

En fotballcup som samler barn, unge og lokale lag til en dag fylt med spilleglede, samhold og ekte idrettsglede på tvers av alder og nivå.

Les mer

Partner Card

Fotokort med mørk bunnskygge og hvit tittel og ledetekst. CMS-klar, og fungerer samtidig som en Swiper-slide.

Partnernavn

Kort beskrivelse av samarbeidet.

Photo Slide

Bart fotoslide for en horisontal rail: 555/395 med 16px radius, ingen skygge og ingen tekst. Roten har swiper-slide, så den går rett inn i Slider sin Content-slot.

Timeline Slide

En milepæl på en historikk-rail: rød prikk på en linjebit, deretter år, tittel og brødtekst. Hver slide tegner sin egen linjebit, så linjen blir sammenhengende uansett hvor railen står.

Product Card

Krysslenkekort: foto oppe, h3-tittel, ledetekst og en pilleknapp. Bruk denne til å lenke videre til en annen side.

TV og internett

Se pakkene våre for hjemmet, og sjekk om vi kan levere fiber til din adresse.

Se pakkene

Comparison Card

Rødt 5:4 illustrasjonspanel, h3-tittel og en punktliste. Bygget for «Hva er forskjellen?».

Fiberbredbånd

Package Card

Altibox-pakkekort: fotohode med pakkenavn og hastighetsmerke, logorad som krysser skjøten, rød kropp og hvit CTA i full bredde. De fem punktene er EN rik tekst (Features) — legg til, fjern eller flytt punkter fritt. Merkefargen kommer fra varianten (Medium / Standard / Ekstra). Kortet er bevisst temauavhengig: det er rødt på alle flater.

Medium

100/100

Se priser og få tilbud

Checklist Card

Rødt sjekklistekort: tittel og ikon over en hårstrek, deretter kroppen. Kroppen er EN rik tekst, så antall punkter er fritt per instans. Festet til Brand-modus, så det er rødt på alle flater. Varianter: White Card (hvitt kort med rød tittellinje) og Icon Above (50px ikon over tittelen). Sjekkhaken er en maske malt med currentColor, så den er hvit på rødt og mørk på hvitt.

Smartnett

Contact Person Card

Kontaktperson: portrett oppe, navn som ekte h3, rød rolletittel, hårstrek, og rader for telefon og e-post med ikoner. Hvert felt er en egenskap. Festet til Light-modus.

Kristian Brandsberg

Salgssjef

90 16 82 95

bedrift@altifiber.no

Link Card

Hvitt snarveiskort: rundt ikonmerke, h3-tittel og opptil fire lenker med utoverpil. Tittel, ikon og hver lenkes tekst, mål og synlighet er egenskaper. Festet til Light-modus.

Min Altifiber

Logg inn

Ditt kundeforhold

Les e-post

Driftmeldinger

Testimonial Card

Flytende sitatkort: hvitt panel med rød ramme, sitattegn, sitatet, og en rad med avatar, navn og kilde. Festet til Light-modus. Går inn i Page Hero sin Testimonial-slot, eller hvor som helst et sitat skal flyte over et foto.

Jeg har hatt Altifiber siden det kom til Uenes, og er hundre prosent fornøyd med både TV og internett.

Kenneth S

bytt.NO

Notice Pill

Rosa merknadschip: et lite info-tegn, en setning og en inline-lenke. Festet til Tint-modus, så den er rosa på alle flater.

Scale Line

Skala: en hårstrek med en prikk i hver ende og en etikett under hver ende. Begge etikettene er egenskaper. Strek og prikker følger seksjonens tema.

App Store Badges

Nedlastingsmerker for App Store og Google Play, sentrert rad. Sett hver butikklenke per instans.

Altifiber Lockup

ALTIFIBER + altibox som ett sentrert bildemerke. Bruk denne overalt der de to merkene opptrer sammen over en overskrift.

Rail Footer

Raden under en horisontal rail: valgfri bildetekst nede til venstre, og et SCROLL-hint med pil nede til høyre. Står ved siden av Slider, ikke inni en slide.

Ikoner

Tre inline-SVG-ikoner som arver currentColor — de tar altså fargen fra teksten rundt og følger temaet. De finnes som komponenter fordi Button Main sin Icon-slot bare tar imot komponentinstanser.

Icon Arrow Outward (utoverpil, for lenker som forlater nettstedet) · Icon Download (nedlasting — NB: viewBox er 19×24, ikke kvadratisk, så den må gis en 19/24-boks eller den strekkes) · Icon Mail (konvolutt, ekte 20×20).

Sparkle Mark

Dekorativ rød dobbel firepunktsglitter. Absolutt posisjonert oppe til høyre i containeren sin — den legger seg altså over hjørnet av flaten den står i, ikke i tekstflyten. Malt fra swatch/brand-500, ikke fra temaet, fordi Figma tegner den merkerød på et bånd der teksten er mørkerød. Skjules på small og mindre.

Om seksjonene

Dette er bånd i full bredde. De er ikke vist som levende eksempler her — de ville gjort denne siden svært lang, og de står allerede på ekte sider. Lenkene under viser hver av dem i sin rette sammenheng.

Alle sammen er bygget som en duplikat av Section, så Theme, Padding Top, Padding Bottom, ID og Visibility er ekte egenskaper med Webflows egne nedtrekkslister.

Trygge å gjenbruke på en ny side

• Page Hero — toppseksjonen på alle undersider. Foto, merke og begge landskapshalvdelene er bildeegenskaper: bytt bildet, bygg aldri en ny hero. Se /produkter. NB: polstringen er ikke alltid Large/Large — en hero uten eyebrow, CTA og landskap vil ha Small/Small.
• CTA Band — det avsluttende «Sjekk om du kan få fiber»-båndet. Overskrift, ledetekst og en CTA på den ene siden, avrundet foto på den andre. Variant styrer hvilken side bildet står på.
• Promo Banner — delt promokort med 9 varianter (Tint/Light/Dark × bildeside, pluss Compact). Husk u-max-width-none på seksjonens Container Classes, ellers måler kortet 1280px i stedet for sine egne 1397.
• Feature Split — tokolonners bånd: overskrift, tekst og valgfri eyebrow + CTA på den ene siden, foto med merke på den andre.
• Prose Body — ren tekstflate på 800px med en avsluttende knapp. Til dokumentsider. Se /apenhetsloven.
• Contact Panel — hvitt kontaktpanel: foto på halve bredden, overskrift og opptil tre ikonrader med kontaktinfo.
• Lokal Intro, Fact Strip, Event Banner — trioen fra «Lokal tilhørighet». Se /om-altifiber.

CMS-drevne seksjoner

Disse henter innhold fra en CMS-samling. De kan gjenbrukes, men feltkoblingene må settes i Designer — de kan ikke skrives utenfra.

• Aktuelt Feed — overskrift og CTA over tre artikkelkort. Til forsiden.
• Aktuelt Grid — hele artikkelindeksen med «Last inn flere innlegg». Se /aktuelt.
• Aktivitet Grid — aktivitetskalenderen fra samlingen Arrangementer. Se /samfunnsansvar.
• Initiativ Rail — horisontal rail med lokale samarbeid.
• Document List — nedlastingsrader fra samlingen Grossistdokumenter. Se /grossisttilgang.

Sidespesifikke — ikke gjenbruk disse

Disse er bygget for en bestemt side eller mal, og er finjustert mot akkurat det innholdet. Ta kontakt hvis du trenger noe lignende et annet sted, så lager vi en variant i stedet.

• Aktuelt Hero og Artikkel Hero / Artikkel Content — tilhorer /aktuelt og artikkelmalen.
• Package Tabs og Fellesavtale Tabs — faneblokker med faste slots for kortene.
• Trygg Feature Panel — bygget for Altibox Trygg.
• Contact Section og Bedrift Contact Form — kontaktblokken for Bedrift og Boligselskap.
• Home Hero og Home Intro — hoerer til forsiden. Home Intro er ubrukt og bor slettes.

Visuelle hjelpere og skjulte verktoy

• Visual Badged — bilde med et rundt ikonmerke som henger over hjornet.
• Map Panel — kartpanel i full bredde.
• TV Mockup, Promo Visual, Kundeservice Photos, WiFi Overalt Routers — faste illustrasjonsoppsett for bestemte seksjoner.
• Lokal Backdrop og WiFi Overalt Backdrop — bakgrunnsflater. Går i en seksjons Background-slot, ikke i Container.
• Slider Config og Rail Overrides — skjulte kode-innslag. Ikke slett dem: de styrer hvordan sliderne og railene oppforer seg. De viser ingenting selv.

1. Tema er en egenskap, aldri en variant

Farge på en seksjon settes med Theme-egenskapen på Section. Den legger på riktig u-theme-*-klasse, som gir bade bakgrunn og riktig arvet tekstfarge. Variant-aksen er reservert for layout — typisk hvilken side bildet står på.

Og enda viktigere: styr farger fra theme-laget, ikke fra en rå farge. theme/text og theme/heading-accent bytter seg selv når temaet bytter; swatch/brand-500 står fast. Bruker du en rå farge, blir elementet rødt-på-rødt når noen setter seksjonen til Brand.

2. Promo Banner trenger u-max-width-none

Promo Banner er tegnet 1397px bred, men en vanlig .u-container klemmer den til 1280. Skriv u-max-width-none i seksjonens Container Classes, ellers blir båndet stille og rolig for smalt — det ser ikke ut som en feil, bare litt feil.

3. Punktlister er EN rik tekst

Pa Package Card (Features) og Checklist Card (Bullet List) er hele lista en rik-tekst-egenskap — ikke fem separate felt. Det betyr at du fritt kan legge til, fjerne og flytte punkter per kort, og antallet følger med av seg selv. Skriv i feltet som i et vanlig tekstdokument.

4. De handtegnede markeringene er malt mot teksten

Heading Scribble, Swash og Circle er posisjonert mot den konkrete teksten de står på. Endrer du ordlyden, treffer streken feil ord. Bytt helst bare enkeltord av samme lengde. Heading Underline er den eneste som publiserer en ekte h2 uten et ekstra valg i verktøylinjen — de tre andre går gjennom Typography Heading, som publiserer en div til du velger overskriftsniva selv.

5. Bilder som er satt som egenskap får ikke srcset

Når et bilde ligger i en komponent-egenskap (slik som Page Hero sitt foto), lager ikke Webflow responsive varianter av det. Last derfor opp et bilde som allerede er komprimert og ikke større enn det vises — ellers sender siden ned langt flere piksler enn den trenger, også på mobil.

Og husk alt-tekst: hvert bildefelt har et eget alt-felt rett ved siden av. Et dekorativt bilde skal ha tom alt-tekst; et bilde som betyr noe skal beskrives.