MediaCard

<MediaCard
  title="Hva gjør Entur?"
  description="Entur eier og styrer salgssystemet for togbilletter og samler data om kollektivtrafikken i Norge, slik at det blir enklere å velge en bærekraftig reise."
  href="https://www.entur.no"
  category="Transport"
  style={{ width: '20rem' }}
>
  <img
    src="https://cdn.sanity.io/images/npa0lfls/production/826e6ebe51714ac47995358213a8889416393058-999x598.png"
    alt="Buss som kjører over bro i fjellandskap"
    style={{ width: '100%' }}
  />
</MediaCard>

Bruk MediaCard når

Du trenger en skyggefull boks som gir et kort sammendrag av et emne og lenker videre til en side med mer detaljer, og der bilde, video eller grafikk forsterker innholdet. MediaCard passer godt som navigasjon til en artikkel eller bloggpost, og skal være enkel å skanne etter relevant informasjon.

Unngå MediaCard når

innholdet ikke trenger bilde, video eller grafikk for å forsterkes, bruk heller Card i stedet.

Retningslinjer

Komponenten skal ha en beskrivende tekst under tittelen. Teksten bør være kort og konsis, på maks 3 linjer.

Om du bruker illustrasjon som media, bør den være enkel for best lesbarhet, for eksempel et dyr, en person eller et objekt. Unngå store og komplekse illustrasjoner med mange detaljer, som scener med flere elementer, bakgrunner eller kombinasjoner av mennesker, dyr og landskap.

Eksempler

Vertikal (standard)
<MediaCard
  title="Hva gjør Entur?"
  description="Entur eier og styrer salgssystemet for togbilletter og samler data om kollektivtrafikken i Norge, slik at det blir enklere å velge en bærekraftig reise."
  href="https://www.entur.no"
  category="Transport"
  style={{ width: '20rem' }}
>
  <img
    src="https://cdn.sanity.io/images/npa0lfls/production/826e6ebe51714ac47995358213a8889416393058-999x598.png"
    alt="Buss som kjører over bro i fjellandskap"
    style={{ width: '100%' }}
  />
</MediaCard>

Horisontal
<MediaCard
  title="Hva gjør Entur?"
  description="Entur eier og styrer salgssystemet for togbilletter og samler data om kollektivtrafikken i Norge, slik at det blir enklere å velge en bærekraftig reise."
  href="https://www.entur.no"
  hideArrow
  orientation="horizontal"
>
  <img
    src="https://cdn.sanity.io/images/npa0lfls/production/2bc9eca8e709abd711defaa31ebfd0e6dd90b599-320x320.svg"
    alt="Illustrasjon av en sau"
  />
</MediaCard>