Footer

BeskrivelseKodeUniversell utforming

Om komponenten

Footer er to ulike komponenter, normal og simple:

  • PktFooter
  • PktFooterSimple

Avhengigheter

Ikoner:

  • chevron-right (required)
  • twitter
  • facebook

Varianter

Normal

Kolonne 3 er obligatorisk med lenke til personvern og informasjonskapsler og tilgjengelighet. Du kan velge innholdet i lenkene i kolonne 3 ved Ă„ sende med en href-string i props personvernOgInfoLink og/eller tilgjengelighetLink.

Eksempeldata PktFooter

const columnOne = {
  title: "Kolonnetittel 1",
  text: "Her kan du skrive en lengre tekst som beskriver lĂžsningen eller tjenesten om Ăžnskelig.",
  links: [
    {
      text: "Test ekstern lenke",
      href: "#",
      external: true,
      openInNewTab: true,
    },
    { text: "Testlenke", href: "#" },
  ],
};
const columnTwo = {
  title: "Kolonnetittel 2",
  links: [
    {
      text: "Test ekstern lenke",
      href: "#",
      external: true,
      openInNewTab: true,
    },
    { text: "Testlenke", href: "#" },
  ],
};
const socialLinksAll = [
  { href: "#", language: "Engelsk", openInNewTab: true },
  { href: "#", iconName: "facebook" },
  { href: "#", iconName: "twitter" },
];

Simple

Default

Eksempeldata PktFooterSimple

const links = [
  {
    href: "#",
    text: "Test ekstern lenke",
    external: true,
    openInNewTab: true,
  },
  {
    href: "#",
    text: "Testlenke",
  },
  {
    href: "#",
    text: "Test link",
  },
];

CSS oversikt

Normal

Block:

  • .pkt-footer

Elements:

  • .pkt-footer__container
  • .pkt-footer__column
  • .pkt-footer__title
  • .pkt-footer__list
  • .pkt-footer__text
  • .pkt-footer__list-item
  • .pkt-footer__link
  • .pkt-footer__link-icon
  • .pkt-footer__social
  • .pkt-footer__social-language
  • .pkt-footer__social-icons
  • .pkt-footer__social-icon-link
  • .pkt-footer__social-icon

Simple

Block:

  • .pkt-footer-simple

Elements:

  • .pkt-footer-simple__container
  • .pkt-footer-simple__list
  • .pkt-footer-simple__list-item
  • .pkt-footer-simple__link
  • .pkt-footer-simple__link-icon

Props, slots og events

Normal

PropsTypeValidationDefaultDescription
columnOneobjecttitle er pÄkrevd. Kan ogsÄ inneholde text eller/og links. Links mÄ vÊre et array av objekter hvor hvert objekt inneholder string href og text, kan inneholde boolean external og openInNewTab.Et objekt som representerer den fÞrste kolonnen i footer.
columnTwoobjecttitle er pÄkrevd. Kan inneholde links. Links mÄ vÊre et array av objekter hvor hvert objekt inneholder string href og text, kan inneholde boolean external og openInNewTab.Et objekt som representerer den andre kolonnen i footer.
socialLinksarrayEt array av objekter hvor hvert objekt inneholder href, iconName, language og openInNewTab.Et valgfritt array av objekter som representerer lenkene til sosiale medier og sprÄk i footer.
personvernOgInfoLinkstringLink til personvern og info-siden.Lenke til personvern og informasjonssiden.
tilgjengelighetLinkstringLink til tilgjengelighetssiden.Lenke til tilgjengelighetssiden.

Simple

PropsTypeValidationDefaultDescription
linksarrayEt array av objekter hvor hvert objekt skal inneholde href og text. Kan inneholde boolean external og openInNewTab[]Et valgfritt array av objekter som representerer lenkene i footer.
personvernOgInfoLinkstringLink til personvern og info-siden.Lenke til personvern og informasjonssiden.
tilgjengelighetLinkstringLink til tilgjengelighetssiden.Lenke til tilgjengelighetssiden.