Sidfot (avancerad)

Den nye footer har ikke faste rammer, hvilket betyder at man som superbruger selv skal tage stilling til, hvordan griddet i footeren skal se ud. 

Kommuneplatformens løsning er baseret på et 12 kolonne-system, hvilket betyder at alt indhold er fordelt i 12 kolonner hen over skærmen. Hvis ens indhold overstiger de 12 kolonner, påbegynder man en ny række af 12 kolonner. 'Bootstrap grid overlay' er et plugin, der kan downloades i din browser, hvis du ønsker at se griddet live på din hjemmeside. Dette kan hjælpe med forståelsen af grid-opbygningen af footeren.

Her er to eksempler på grids, som vores nuværende footer er baseret på:

'Hoved footer'-grid:

• 3 kolonner til logo
• 3 kolonners tomrum/'fill' (offset) 
• 6 kolonner med 2 x 3 kolonner til footer-indhold
• 6 kolonners tomrum/'fill' (offset)
• 6 kolonner med 2 x 3 kolonner til footer-indhold

'Footer med Vandmærke' grid:

Logo på linje med indhold - her viser de lilla kasser kolonnefordelinge, som følger indholdet:

Logo i egen række

Her har logoet sin egen selvstændige række, men 4 x 3 kolonner af links en række herunder:

• 3 kolonner til logo
• 9 kolonners fill (offset)
• 4 x 3 kolonner til footer indhold

Vi anbefaler, at man så vidt muligt arbejder indenfor brugen af maks. 12 kolonner til footeren eller maks. to rækker, da styling og inddeling af footer-indhold efter 12 kolonner og to rækker godt kan se en del kludret ud - og desuden endnu sværere at opsætte/finde hovedet hale i for dig som bruger.

Fill (offset) - eller tomrum - bruges til at skabe whitespace, skabe en ny række af indhold eller fylde huller mellem kolonner med indhold ud. Skal der være fill skal det indsættes som et aktivt valg, man tager for at få indhold til at være placeret på en bestemt måde i forhold til ens valg af design.

Hvis ikke man bruger fill, vil ens indhold altid lægge sig lige op ad hinanden, uden noget mellemrum imellem.

*Obs! fill er ikke et synligt element og det kan derfor være svært at forholde sig til. I eksemplet nedenfor er fill blevet brugt, men ses kun som afstand mellem indhold.

Sub-footeren er en forlængelse af footerens primære indhold - den er tiltænkt copyright-tekst og links til social medier. Sub-footeren findes helt nederst i footeren.

Her kan i se et eksempel, hvor sub-footeren er i brug:

• Billede logo. Du har mulighed for at indsætte et logo fra mediearkivet. Brug gerne det højtopløselig .svg-format. 
  
• Tekst-logo. Har du ikke et logo som billede, du kan indsætte, kan du i stedet skrive dig frem til et 'logo'.
  

• Indholds t
• Links

• Indholds title
• Rich-text
• CTA knap

• Indholds title
• Links
• Icon

Hvad er et vandmærke og hvordan bruges det?

......

• Vandmærke på desktop
• Vandmærke på mobil
• Positionering af vandmærke

Vælg størrelse af logo på desktop og mobil

Flere forskellige muligheder for styling af links i footer.

• Default
• Underlined
• Pile

På grund af footers mange muligheder har man også mulighed for at justere padding i footeren.

Paddingen er den afstand der findes over og under footerens primære indhold.

Ligesom man kan tilføje margin bund på sektioner på forsiden og sektions sider for at skabe afstand mellem indhold, kan man også tilføje margin bund på kolonner i footeren.

Margin bund på kolonnerne skal kun bruges kun i tilfælde hvor ens grid overstiger 12 kolonner og har flere rækker. Hvis dette er tilfældet kan man slå margin bund til for at skabe afstand mellem indholdet i rækkerne.

'Positioner indhold til højre' bruges i tilfælde hvor logo er placeret i højre side af footeren.

Som standard placeres alt indhold altid til venstre, og derfor skal man aktivt ind og ændre placeringen hvis andet ønskes. Formålet er at udnytte bredden af griddet og undgå at logo eller andre højre stillet indhold, ligner at det fejlagtigt svæve.

I eksemplet nedenfor er Richteksten positioneret til venstre og logoet til højre:

Der kan opstå situationer, hvor rækkefølgen af ens indhold i footeren skal ændres mellem desktop- og mobilvisning og det er her, at indstillingen 'Sorteringsrækkefølge - mobil' kommer på banen.

Denne indstillingsmulighed er dog mest relevant i situationer hvor logoet er placeret i højre side af griddet, såfremt man ønsker logoet som det første, der vises i mobilvisning.

I eksemplet herunder ses en footer med fire rækker af links og tekst/logo, som strækker sig ud over alle 12 kolonner. Her har første linkliste (som her har overskriften 'Link list') placering 1 i 'sorteringsrækkefølge - mobil'. Det betyder, at den vil vises først i footeren i mobilvisning. Rækkefølgen hedder:

• Liste 1 har placering 1 
• Liste 2 har placering 2
• Tekstboks (kolonne 3) med rich-tekst har placering 3
• Logoboks og adresse (kolonne 4) med logo og rich-text har placering 4

Det vil se ud som følger på mobil:

Hvad gør man så hvis man i en mobil situation ønsker at logo og rich-text har placering 1?

Man ændre rækkefølgen:

• Kolonne 1 med link list har placering 2
• Kolonne 2 med link list har placering 3
• Kolonne 3 med rich-text har placering 4
• Kolonne 4 med logo og rich-text har placering 1

*Obs alle placeringer på alle kolonner skal udfyldes før funktionaliteten virker.

Ligesom man kan tilføje margin bund på sektioner på forsiden og sektions sider for at skabe afstand mellem indhold, kan man også tilføje margin bund på indhold i kolonner i footeren.

Margin bund på indholdet skal kun bruges kun i tilfælde hvor der er indsat mere end en type indhold i kolonnen. Hvis dette er tilfældet kan man slå margin bund til for at skabe afstand mellem indholdet i kolonnerne.

Det er muligt selv at vælge, om man vil omdanne ens indhold til accordions på mobil for at gøre footeren mere overskuelig i tilfælde hvor ens footer har meget indhold.

Obs! Indhold skal have en title for at virke, da titlen bruges til at åbne og lukke accordionen. Hvis ikke man ønsker en title til ens indhold, men samtidigt ønsker accordion på mobil, kan man skjule titler på desktop.

Indhold som har accordion slået fra på mobil:

Indhold som har accordion slået til på mobil:

Det er muligt at ændre font størrelsen på ens indhold i footeren.

Som default følger font størrelser i footeren følgende:

• Indholdstitler følger den globale H3 font størrelsen
• Text, links mm følger den globale component text størrelse

Med footerens font størrelses vælger kan man nu gange font størrelsen op med enten 1.5 gang eller 2 gange. 

Vi anbefaler at ikke sætter forskellige størrelser mellem indhold i footeren og man at konsekvent i sin brug af valg af størrelse, medmindre man det bruges til fx at fremhæve kontakt oplysninger eller ligende. Vi anbefaler ikke at bruge et stor font størrelse i en footer, som har meget indhold, da det kan gøre det uoverskueligt for brugeren.

Her er nogle eksempler på indhold med forskellige font størrelser.

Standard/default:

x 1.5: 

x 2:

*Obs! hvis størrelsen skal ændres skal dette gøre per indhold.

Hvis man ikke ønsker at gøre den generelle fontstørrelse større, men i stedet ønsker at gøre titlen mere diskret, kan man slå komponent font størrelse til på titlerne.
Dette gør at titler får default font størrelsen fra komponent font størrelsen i stedet for H3 font størrelsen.



*Obs! Den generelle fontstørrelses vælger vil overskrive denne mulighed, hvis begge er slået til samtidigt.