Footer

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.

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.

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.