Hero

Denne komponenten er under aktiv utvikling, og vi trenger din feedback!

Er du eventyrlysten, test den og kom med innspill til oss på Slack.

Om komponenten

Hero-elementer brukes i toppen av en side, plassert under Breadcrumbs. Formålet er å gi en kort beskrivelse av sidens rolle, og har ofte en tydelig og konkret handlingsknapp.

Hero har tre varianter: standard, two-column og full-bleed.
Two-column skal kun brukes til landingssider, standard kan brukes til både landingssider og undersider. Mens full-bleed kun kan brukes til undersider for bolig/eiendomsenheter.

Egnet til:

Innhold på toppnivå med overskrift, undertekst, media (bilde eller video) og ofte knapp.

Relaterte komponenter

VideoLoop

Varianter

Standard (underside)

<div className="relative w-full">
  <UNSAFE_Hero>
    <Content>
      <Heading level={2}>Dette er en Hero</Heading>
      <Description>– et samarbeidsprosjekt med Nordr</Description>
    </Content>
    <Media>
      <VideoLoop
        src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
        format="mp4"
        alt="En postbil kjører rundt i det moderne nabolaget på Frysja. Her finnes det fine uteområder, med husker og kafeer."
      />
    </Media>
  </UNSAFE_Hero>
</div>

Standard (landingsside)

<div className="relative w-full">
  <UNSAFE_Hero>
    <Content>
      <Heading level={2} size="xl">Dette er en Hero</Heading>
      <Description>– et samarbeidsprosjekt med Nordr</Description>
    </Content>
    <Media>
      <VideoLoop
        src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
        format="mp4"
        alt="En postbil kjører rundt i det moderne nabolaget på Frysja. Her finnes det fine uteområder, med husker og kafeer."
      />
    </Media>
  </UNSAFE_Hero>
</div>

Full-bleed (underside)

<div className="relative w-full">
  <UNSAFE_Hero variant="full-bleed">
    <Content>
        <Heading level={1}>Bank på OBOS-måten</Heading>
        <p>
          Vi har satt ned renta på flere av boliglånene våre fra 2. april – og
          spanderer både etablerings- og tinglysingsgebyret på alle medlemmer
          som flytter lånet til oss før 31. mai. Det er bank på OBOS-måten.
        </p>
        <Group>
          <Button href="https://www.obos.no/bank/registrer-deg">
            Bli bankkunde
          </Button>
          <Button
            variant="secondary"
            href="https://www.obos.no/bank/registrer-deg/derfor-bor-du-velge-obos-banken"
          >
            Mer om bank på OBOS-måten
          </Button>
        </Group>
      </Content>
      <Media>
        <img
          src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/ar_1.234,w_1440,f_auto,q_auto,g_auto,c_fill/v1662557719/Kampanjer/obos-medlem-ungt-par-hjemme.jpg"
          alt=""
        />
      </Media>
  </UNSAFE_Hero>
</div>

<UNSAFE_Hero variant="full-bleed">
  <Content>
    <Heading level={1}>Ulven</Heading>
    <Description>– et nytt nabolag i Oslo</Description>
  </Content>
  <UNSAFE_Carousel>
    <UNSAFE_CarouselItems>
      <UNSAFE_CarouselItem>
        <UNSAFE_CarouselItem>
          <Media>
            <VideoLoop
              src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
              format="mp4"
              alt="En postbil kjører rundt i det moderne nabolaget på Frysja. Her finnes det fine uteområder, med husker og kafeer."
            />
          </Media>
        </UNSAFE_CarouselItem>
      </UNSAFE_CarouselItem>
      <UNSAFE_CarouselItem>
        <Media>
          <img
            src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_2048,q_auto/v1582122753/Boligprosjekter/Oslo/Ulven/Ulven-N%C3%A6romr%C3%A5de-Oslo-OBOS-Construction-city.jpg"
            alt=""
          />
        </Media>
      </UNSAFE_CarouselItem>
      <UNSAFE_CarouselItem>
        <Media>
          <img
            src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1587988823/Boligprosjekter/Oslo/Frysjaparken/Frysjalia/Frysjaparken_interi%C3%B8r_30.jpg"
            alt=""
          />
        </Media>
      </UNSAFE_CarouselItem>
      <UNSAFE_CarouselItem>
        <Media fit="contain">
          <img
            src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_1080,q_auto:best/t_2_3/v1747985572/Temasider/Folk/Hans%20Petter%20%20-%20Trang%20f%C3%B8dsel/Obos-Hans-Petter-Aaserud-Photo-Einar-Aslaksen-03093_web.jpg"
            alt=""
          />
        </Media>
      </UNSAFE_CarouselItem>
      <UNSAFE_CarouselItem>
        <Media>
          <img
            src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1699879884/Boligprosjekter/Oslo/Frysjaparken/Ager/Originale%20bilder/OBOS_Frysja-Ager-Illustrasjon_av_Frysja_torg_i_Ager_borettslag.jpg"
            alt=""
          />
        </Media>
      </UNSAFE_CarouselItem>
    </UNSAFE_CarouselItems>
  </UNSAFE_Carousel>
</UNSAFE_Hero>

Kontekst

I kode må denne komponenten ikke plasseres i en relativ container som ikke tar hele skjermbredden. Det er fordi bildet plasseres med absolute position for å ta opp hele skjermbredden.

Props

Hero

Prop	Description	Default
`id?`		-
`variant?`	Defines the variant of the Hero	standard

Heading

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

Media

Prop	Description	Default
`id?`		-
`fit?`	Control how the content should be placed with the object-fit property You might for example want to use `fit="contain"` portrait images that should not be cropped	cover

Carousel

Prop	Description	Default
`id?`		-
`align?`	Alignment of the items relative to the carousel viewport.	center
`autoPlayDelay?`	Delay in milliseconds between each automatic transition of the carousel. Any interaction with the carousel will immediately stop the autoplay.	-
`initialIndex?`	The initial snapped index of the carousel.	0
`orientation?`	Orientation of the carousel.	horizontal
`scrollGestures?`	Whether the carousel should scroll with regular mouse/trackpad scroll gestures, in addition to swipe gestures.	false
Events
`onSelect?`	Callback invoked when the snapped index changes.	-
`onSettled?`	Callback invoked after the carousel scrolling "settles". Think of this as the debounced version of `onSelect`.	-