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.