Hero-sectie

De eye-catcher op de meeste pagina's. De hero-sectie kan gebruikt worden om de pagina in te leiden of om extra aandacht te vragen voor een sectie.

Aandachtspunten:

• De voorkeur gaat binnen de huisstijl uit naar het gebruik van foto's of visuele beelden binnen de hero-sectie. Een enkele foto, of een carrousel van foto's zijn beide geschikte opties.
• De foto kan op zichzelf staan, of als coverfoto met titel, of als decoratieve achtergrond bij een toptakenblok.
• Een headerfoto dient vaak als blikvanger op een webpagina en vormt een geheel met de menubalk en het Rijkslogo.
• De hero kan ook gebruikt worden zonder beeldmateriaal. Dan heeft de hero-sectie een achtergrondkleur passend bij de gekozen applicatiekleur.
• Coverfoto's kunnen in de hmtl gezet worden, dit is met name gebruikelijk als er gebruik gemaakt word van een cms-systeem. De coverfoto kan ook via de CSS toegevoegd worden, zie: static/scss/hero.scss voor meer informatie. De coverfoto via de CSS toevoegen is een goede optie wanneer er gebruik gemaakt wordt van een coverfoto die niet uit een cms-systeem komt.
• Toegankelijkheid:
  • De hero-foto is meestal een decoratieve foto. Als de foto alleen visueel toegevoegde waarde heeft is deze voor gebruikers die gebruik maken van screenreaders niet relevant. Gebruik daarom bij een decoratieve foto een lege alt="". Voeg de alt="" wel toe zodat screenreaders weten dat ze deze over kunnen slaan zonder een alternatief op te lezen. Voor meer informatie zie: W3.org decoratieve afbeeldingen.

De hero-sectie kan verschillende combinaties aan content bevatten. Op basis van de content is er met het oog op gebruiksvriendelijkheid en bruikbaarheid een andere styling gewenst. Om de content goed weer te geven zijn de volgende opties mogelijk.

Beschikbare voorbeelden:

Hero coverfoto

Een hero is te gebruiken als blikvanger met enkel een coverfoto, zonder overige content.

Visueel voorbeeld:

Html voorbeeld:

              
<section class="hero">
  <img src="" alt="">
</section>
              
            

Hero coverfoto met titel

Als de gewenste content alleen een titel bevat kan deze direct op de afbeelding weergegeven worden.

Aandachtspunten:

• Plaats de content binnen een <div> om gebruik te maken van de standaard pagina layout. Je kunt hierbij kiezen tussen twee opties. Styling direct op de div of gebruik maken van de class content-container. Laad hiervoor de bijbehorende bestanden in binnen het project:
  • @minvws/manon/hero-div
  • @minvws/manon/hero-content-container
• Toegankelijkheid:
  • Om de leesbaarheid te vergroten wordt er een donkere overlay geplaatst onder de tekst als deze direct op de coverfoto staat. De overlay vergroot het contrast en komt zo de leesbaarheid ten goede.
  • De tekst wordt links onderin uitgelijnt volgens het huisstijldocument. Op mobiel wordt de content onder de afbeelding geplaatst.
  • Om de leesbaarheid van de tekst te vergroten heeft de tekst een maximale breedte.

Visueel voorbeeld:

Html voorbeeld styling op div:

              
<section class="hero">
  <img src="" alt="">
  <div>
    <h2>Lorem ipsum dolor set</h2>
  </div>
</section>
              
            

Html voorbeeld styling met class content-container:

                
  <section class="hero">
    <img src="" alt="">
    <div class="content-container">
      <h2>Lorem ipsum dolor set</h2>
    </div>
  </section>
                
              

Hero coverfoto met content

Het tonen van content, anders dan alleen een titel, op een coverfoto

Aandachtspunten:

• Plaats alle content direct binnen de hero in een <div> om gebruik te maken van de standaard pagina layout. Dit zorgt ervoor dat de content uitlijnt met de rest van de pagina-content.
• Let op: Content anders dan een titel kan het beste met een tegelweergave getoont worden. De witte achtergrond van de tegelweergave vergroot de leesbaarheid. Voor meer informatie zie: tegelweergave. Groepeer alle content die op de coverfoto komt te staan binnen een <div> met een class tile voor de tegelweergave met een witte achtergrond.

Visueel voorbeeld:

Html voorbeeld styling op div:

              
<section class="hero">
  <img src="images/beach.jpg" alt="">
  <div class="one-third-two-thirds">

    <div class="tile">
      <h2>Lorem ipsum dolor set</h2>
      <nav>
        <ul>
          <li><a href="">Lorem ipsum</a></li>
          <li><a href="">Dolor sit amet</a></li>
          <li><a href="">Consectetur</a></li>
        </ul>
      </nav>
    </div>

  </div>
</section>
              
            

Html voorbeeld styling met class content-container:

              
<section class="hero">
  <img src="images/beach.jpg" alt="">
  <div class="one-third-two-thirds content-container">

    <div class="tile">
      <h2>Lorem ipsum dolor set</h2>
      <nav>
        <ul>
          <li><a href="">Lorem ipsum</a></li>
          <li><a href="">Dolor sit amet</a></li>
          <li><a href="">Consectetur</a></li>
        </ul>
      </nav>
    </div>

  </div>
</section>
              
            

Hero coverfoto met content en zoekveld

Aandachtspunten:

• Plaats alle content direct binnen de hero in een <div> om gebruik te maken van de standaard pagina layout. Dit zorgt ervoor dat de content uitlijnt met de rest van de pagina-content.
• Let op: Content anders dan een titel kan het beste met een tegelweergave getoont worden. De witte achtergrond van de tegelweergave vergroot de leesbaarheid. Voor meer informatie zie: tegelweergave. Groepeer alle content die op de coverfoto komt te staan binnen een <div> met een class tile voor de tegelweergave met een witte achtergrond.

Visueel voorbeeld:

Html voorbeeld styling op div:

              
<section class="hero">
  <img src="images/beach.jpg" alt="">
  <div class="one-third-two-thirds">

    <div class="tile">
      <h2>Lorem ipsum dolor set</h2>
      <nav>
        <ul>
          <li><a href="">Lorem ipsum</a></li>
          <li><a href="">Dolor sit amet</a></li>
          <li><a href="">Consectetur</a></li>
        </ul>
      </nav>
    </div>

    <!-- placeholder search element, should be replaced when possible -->
    <form class="search">
      <input type="text" placeholder="Zoeken">
      <button type="submit">Zoeken</button>
    </form>

  </div>
</section>
              
            

Html voorbeeld styling met class content-container:

              
<section class="hero">
  <img src="images/beach.jpg" alt="">
  <div class="one-third-two-thirds content-container">

    <div class="tile">
      <h2>Lorem ipsum dolor set</h2>
      <nav>
        <ul>
          <li><a href="">Lorem ipsum</a></li>
          <li><a href="">Dolor sit amet</a></li>
          <li><a href="">Consectetur</a></li>
        </ul>
      </nav>
    </div>

    <!-- placeholder search element, should be replaced when possible -->
    <form class="search">
      <input type="text" placeholder="Zoeken">
      <button type="submit">Zoeken</button>
    </form>

  </div>
</section>
              
            

Hero zonder coverfoto

Indien er geen foto beschikbaar is.

• Als een hero-sectie geen afbeelding heeft vult deze zich automatisch met een achtergrondkleur passend bij de gekozen applicatiekleur die aansluit bij de huisstijl.
• De uitlijning van de content verplaatst zich naar links bovenin omdat er geen rekening gehouden dient te worden met een achterliggende afbeelding.
• Gebruik voor de overige contentweergave de weergave zoals beschreven in de voorbeelden met hero-afbeelding.

Visueel voorbeeld:

Html voorbeeld styling op div:

              
<section class="hero">
  <div>
    <h2>Lorem ipsum dolor set</h2>
  </div>
</section>
              
            

Html voorbeeld styling met class content-container:

              
<section class="hero">
  <div class="content-container">
    <h2>Lorem ipsum dolor set</h2>
  </div>
</section>