LinkList

Om komponenten

LinkList lister ut et sett med linker for brukeren. Den brukes primært til navigasjon, men kan også brukes for nedlasting av filer.

Egnet til:

Gruppering av linker for videre navigasjon
Gruppering av filer for nedlasting
Gruppering av eksterne linker
Eller en kombinasjon av de tre over

Uegnet til:

Trigge en handling, bruk knapper det til dette
Linker med mye tekst - bruk heller Cards eller Link til dette

Relaterte komponenter

Link

Varianter

Link

Brukes primært for å lenke til undersider i navigasjonshierarkiet (se breadcrumb). Lenker med pil slik som denne varianten brukes kun til internlenking under obos domenet.

Download

Brukes til en liste med nedlasting, om denne skal brukes sammen med andre varianter av LinkList, pass på at en gjør det tydelig for brukeren

<LinkList className="w-full">
  <LinkListItem>
    <Link download href="/">
      Medlemsvilkår
    </Link>
  </LinkListItem>
  <LinkListItem>
    <Link download href="/about">
      Samtykke
    </Link>
  </LinkListItem>
</LinkList>

External

Brukes til eksterne lenker til domener utenfor obos.

<LinkList className="w-full">
  <LinkListItem>
    <Link href="https://minside.obosnett.no/login" rel="external">
      OBOS Nett - Min side
    </Link>
  </LinkListItem>
  <LinkListItem>
    <Link
      href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
      rel="external noopener noreferrer"
      target="_blank"
    >
      Les mer om trygg forsikring
    </Link>
  </LinkListItem>
</LinkList>

Komposisjon

Det er mulig å sette inn overskrifter på en LinkList ved å bruke komponenten <Heading>. Disse kan være lenker av alle varianter listet over, men trenger ikke å være en lenke.

<div className="grid gap-y-8 w-full">
  <LinkListContainer>
    <Heading level={2}>
      <Link href="/om">OBOS</Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <Link href="/bolig">Bolig</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/bank">Bank</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/medlem">Medlem</Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>
      <Link href="/om" rel="external">
        OBOS EXTERN
      </Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <Link href="https://minside.obosnett.no/login" rel="external">
          OBOS Nett - Min side
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link
          href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
          rel="external noopener noreferrer"
          target="_blank"
        >
          Les mer om trygg forsikring
        </Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>
      <Link
        download
        href="https://cdn.sanity.io/files/tq6w17ny/prod/f39b489e6ba82e03036e735be0a99320e12214d0.pdf"
      >
        Årsrapport
      </Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <Link
          download
          href="https://cdn.sanity.io/files/tq6w17ny/prod/4982d7ca3f4cef8f8bd7de42ea58a0d2c9fa3760.pdf"
        >
          Klimarisikorapport
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link
          download
          href="https://cdn.sanity.io/files/tq6w17ny/prod/74ee591acb8e2f4abe7e19fe6a753abe51a48c68.pdf"
        >
          Klimagassberegning
        </Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>2 items</Heading>
    <LinkList>
      <LinkListItem>
        <Link download href="/">
          Medlemsvilkår
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link download href="/about">
          Samtykke
        </Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
</div>

Ved å wrappe LinkList i en <LinkListContainer> får du også automatisk inndeling i kolonner basert på hvor mange <LinkListItem> LinkList har:

<div className="grid gap-y-8 w-full">
  <LinkListContainer>
    <Heading level={2}>2 items</Heading>
    <LinkList>
      <LinkListItem>
        <Link download href="/">
          Medlemsvilkår
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link download href="/about">
          Samtykke
        </Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>15 items</Heading>
    <LinkList>
      <LinkListItem>
        <Link href="/konsernledelsen">Konsernledelsen</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/styret">Styret</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/representantskapet">
          Representantskapet
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/boligpriser-og-statistikk">
          Boligpriser og statistikk
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/investor-relations">
          Investor Relations
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/digital-arsrapport">
          Digital årsrapport
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/jobb-i-obos">Jobb i OBOS</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/presse">Presse</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/logoer">Logoer</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/obos-boligkonferanse">
          OBOS Boligkonferanse
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/obos-ligaen">OBOS-ligaen</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/datterselskaper">Datterselskaper</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/vedtekter">Vedtekter</Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/generalforsamlingen-i-obos">
          Generalforsamlingen i OBOS
        </Link>
      </LinkListItem>
      <LinkListItem>
        <Link href="/strategi-og-styrende-dokumenter">
          Strategi og styrende dokumenter
        </Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
</div>

Props

LinkList

Prop	Description	Default
`id?`		-

LinkListItem

Prop	Description	Default
`id?`		-

Link

Prop	Description	Default
`animateIcon?`		-
`autoFocus?`		-
`target?`		-
`isDisabled?`	Whether the link is disabled.	-
`children?`		-
`render?`		-
Events
`onFocus?`	Handler that is called when the element receives focus.	-
`onBlur?`	Handler that is called when the element loses focus.	-
`onKeyDown?`	Handler that is called when a key is pressed.	-
`onKeyUp?`	Handler that is called when a key is released.	-
`onClick?`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.	-
`onPress?`	Handler that is called when the press is released over the target.	-
`onPressStart?`	Handler that is called when a press interaction starts.	-
`onPressEnd?`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.	-
`onPressChange?`	Handler that is called when the press state changes.	-
`onPressUp?`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.	-
`onFocusChange?`	Handler that is called when the element's focus status changes.	-
`onHoverStart?`	Handler that is called when a hover interaction starts.	-
`onHoverEnd?`	Handler that is called when a hover interaction ends.	-
`onHoverChange?`	Handler that is called when the hover state changes.	-
Links
`referrerPolicy?`		-
`rel?`		-
`href?`		-
`hrefLang?`		-
`download?`		-
`ping?`		-
`routerOptions?`		-
Styles
`className?`	The CSS className for the element. A function may be provided to compute the class based on component state.	'react-aria-Link'
`style?`		-
Accessibility
`aria-describedby?`		-
`aria-details?`		-
`aria-label?`		-
`aria-labelledby?`		-
`id?`		-

Heading

Prop	Description	Default
`id?`		-
`size?`	The visual text size of the heading	-
`level`	The semantic level of the heading	-