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.

<LinkList className="w-full">
  <LinkListItem>
    <UNSAFE_Link href="/bolig">Bolig</UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_Link href="/bank">Bank</UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_Link href="/medlem">Medlem</UNSAFE_Link>
  </LinkListItem>
</LinkList>

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>
    <UNSAFE_Link download href="/">
      Medlemsvilkår
    </UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_Link download href="/about">
      Samtykke
    </UNSAFE_Link>
  </LinkListItem>
</LinkList>

External

Brukes til eksterne lenker til domener utenfor obos.

<LinkList className="w-full">
  <LinkListItem>
    <UNSAFE_Link href="https://minside.obosnett.no/login" rel="external">
      OBOS Nett - Min side
    </UNSAFE_Link>
  </LinkListItem>
  <LinkListItem>
    <UNSAFE_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
    </UNSAFE_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}>
      <UNSAFE_Link href="/om">OBOS</UNSAFE_Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link href="/bolig">Bolig</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/bank">Bank</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/medlem">Medlem</UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>
      <UNSAFE_Link href="/om" rel="external">
        OBOS EXTERN
      </UNSAFE_Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link href="https://minside.obosnett.no/login" rel="external">
          OBOS Nett - Min side
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_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
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>
      <UNSAFE_Link
        download
        href="https://cdn.sanity.io/files/tq6w17ny/prod/f39b489e6ba82e03036e735be0a99320e12214d0.pdf"
      >
        Årsrapport
      </UNSAFE_Link>
    </Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link
          download
          href="https://cdn.sanity.io/files/tq6w17ny/prod/4982d7ca3f4cef8f8bd7de42ea58a0d2c9fa3760.pdf"
        >
          Klimarisikorapport
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link
          download
          href="https://cdn.sanity.io/files/tq6w17ny/prod/74ee591acb8e2f4abe7e19fe6a753abe51a48c68.pdf"
        >
          Klimagassberegning
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>2 items</Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link download href="/">
          Medlemsvilkår
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link download href="/about">
          Samtykke
        </UNSAFE_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>
        <UNSAFE_Link download href="/">
          Medlemsvilkår
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link download href="/about">
          Samtykke
        </UNSAFE_Link>
      </LinkListItem>
    </LinkList>
  </LinkListContainer>
  <LinkListContainer>
    <Heading level={2}>15 items</Heading>
    <LinkList>
      <LinkListItem>
        <UNSAFE_Link href="/konsernledelsen">Konsernledelsen</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/styret">Styret</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/representantskapet">
          Representantskapet
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/boligpriser-og-statistikk">
          Boligpriser og statistikk
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/investor-relations">
          Investor Relations
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/digital-arsrapport">
          Digital årsrapport
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/jobb-i-obos">Jobb i OBOS</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/presse">Presse</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/logoer">Logoer</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/obos-boligkonferanse">
          OBOS Boligkonferanse
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/obos-ligaen">OBOS-ligaen</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/datterselskaper">Datterselskaper</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/vedtekter">Vedtekter</UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/generalforsamlingen-i-obos">
          Generalforsamlingen i OBOS
        </UNSAFE_Link>
      </LinkListItem>
      <LinkListItem>
        <UNSAFE_Link href="/strategi-og-styrende-dokumenter">
          Strategi og styrende dokumenter
        </UNSAFE_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	-