Hero

Heading

Voorbeeld HTML

<div class="rvo-max-width-layout rvo-max-width-layout--md rvo-max-width-layout-inline-padding--none rvo-hero">
  <div class="rvo-hero__image-container">
    <img
      src="images/www/home.jpg"
      class="rvo-hero__image"
      alt="homepage image"
    />
  </div>
  <div class="rvo-hero__content">
    <h1 class="rvo-hero__title utrecht-heading-1 rvo-heading--no-margins">
      <div>Heading</div>
    </h1>
    <span class="rvo-hero__subtitle"></span>
  </div>
</div>

Open in nieuwe tab

Het Hero component wordt altijd bovenaan een pagina geplaatst. De afbeelding die je wilt tonen kun je doen door middel van een object van {src: string, alt: string} of door een html <img /> item mee te sturen.