Voorbeeld homepage

Kopieerbaar voorbeeld van een opzet voor een homepage.

Aandachtspunten:

Dit voorbeeld maakt gebruik van de onderstaande elementen. Zie de detail-pagina's voor meer informatie:

Voorbeelden

Visueel voorbeeld:

Rijksoverheid

Voorbeeldpagina

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at auctor tortor. Donec sodales velit ante, id bibendum libero consequat vel. Maecenas diam nunc, scelerisque sit amet dui ut, posuere vehicula quam. Quisque a odio vel elit fringilla hendrerit. Nullam iaculis sollicitudin tortor sed accumsan. In consequat maximus malesuada. Etiam nec odio eget lorem condimentum ornare. In sit amet tincidunt lorem.

Pellentesque cursus, augue ut cursus egestas, magna nisl efficitur urna, ut molestie nisl urna in massa. Ut gravida convallis enim. In eget hendrerit ante. Aenean viverra lacus malesuada lectus accumsan commodo. Ut a ullamcorper lorem, id porta est. Cras venenatis turpis in ex pulvinar, at vestibulum metus bibendum. Etiam in tincidunt odio, et pulvinar eros. Integer a luctus odio, quis sollicitudin dolor. Cras vel tempus sapien.

Uitgelicht

Lorem ipsum

Donec fermentum dignissim dui, eu hendrerit tellus pellentesque in. Cras nec pretium nisl. Donec tempor sodales ligula. Nulla sodales vel risus eu ullamcorper. Curabitur ante nisl, dapibus quis quam ac, eleifend eleifend orci.

Lorem ipsum

Dolor set

Mauris tristique, massa sed ullamcorper congue, dui lorem vehicula libero, ac convallis urna neque et neque. Vestibulum eu dapibus lacus. Proin sit amet faucibus est, nec venenatis mi. Suspendisse nisi metus, porta a rhoncus vitae, laoreet ultrices neque.

Lorem ipsum

Dolor set

Lorem ipsum dolor set

Zie ook

Html-voorbeeld:

              
<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8">
    <title>Lorem ipsum</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="static/css/style.css" rel="stylesheet">
    <link href="static/img/favicon.ico" rel="shortcut icon">
    <script defer src="static/js/sidemenu.js"></script>
  </head>

  <header>
    <a href="#main-content" class="button focus-only">Ga direct naar inhoud</a>
    <a href="" class="ro-logo">
      <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
      Rijksoverheid
    </a>

    <nav aria-label="Hoofdnavigatie">
      <div>
        <ul>
            <li ><a href="" aria-current="page">Hoofdpagina</a></li>
            <li><a href="">Ipsum</a></li>
            <li><a href="">Dolor</a></li>
        </ul>
      </div>
    </nav>
  </header>

  <main id="main-content" tabindex="-1">
    <section>
      <div>
        <section class="hero">
          <img src="../images/beach.jpg" alt="">
          <div>
            <h1>Voorbeeldpagina</h1>
          </div>
        </section>

        <section class="background-color-offset condensed">
          <div class="column-3">
            <nav aria-label="Voorbeeld navigatie-element">
              <ul>
                <li><a href="">Lorem ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Set amet</a></li>
                <li><a href="">Adipiscing elit</a></li>
              </ul>
            </nav>
            <nav aria-label="Voorbeeld navigatie-element">
              <ul>
                <li><a href="">Lorem ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Set amet</a></li>
                <li><a href="">Adipiscing elit</a></li>
              </ul>
            </nav>
            <nav aria-label="Voorbeeld navigatie-element">
              <ul>
                <li><a href="">Lorem ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Set amet</a></li>
                <li><a href="">Adipiscing elit</a></li>
              </ul>
            </nav>
          </div>
        </section>

        <section>
          <div>
            <h1>Lorem ipsum dolor set</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at auctor tortor. Donec sodales velit ante, id bibendum libero consequat vel. Maecenas diam nunc, scelerisque sit amet dui ut, posuere vehicula quam. Quisque a odio vel elit fringilla hendrerit. Nullam iaculis sollicitudin tortor sed accumsan. In consequat maximus malesuada. Etiam nec odio eget lorem condimentum ornare. In sit amet tincidunt lorem.</p>
            <p>Pellentesque cursus, augue ut cursus egestas, magna nisl efficitur urna, ut molestie nisl urna in massa. Ut gravida convallis enim. In eget hendrerit ante. Aenean viverra lacus malesuada lectus accumsan commodo. Ut a ullamcorper lorem, id porta est. Cras venenatis turpis in ex pulvinar, at vestibulum metus bibendum. Etiam in tincidunt odio, et pulvinar eros. Integer a luctus odio, quis sollicitudin dolor. Cras vel tempus sapien.</p>
          </div>
        </section>

        <section>
          <div>
            <h1>Uitgelicht</h1>
            <div class="column-3">
              <div>
                <img src="../images/beach.jpg" alt="">
                <h1>Lorem ipsum</h1>
                <p>Donec fermentum dignissim dui, eu hendrerit tellus pellentesque in. Cras nec pretium nisl. Donec tempor sodales ligula. Nulla sodales vel risus eu ullamcorper. Curabitur ante nisl, dapibus quis quam ac, eleifend eleifend orci.</p>
              </div>
               <div>
                <img src="../images/beach.jpg" alt="">
                <h1>Lorem ipsum</h1>
                <p>Donec fermentum dignissim dui, eu hendrerit tellus pellentesque in. Cras nec pretium nisl. Donec tempor sodales ligula. Nulla sodales vel risus eu ullamcorper. Curabitur ante nisl, dapibus quis quam ac, eleifend eleifend orci.</p>
              </div>
              <div>
                <img src="../images/beach.jpg" alt="">
                <h1>Dolor set</h1>
                <p>Mauris tristique, massa sed ullamcorper congue, dui lorem vehicula libero, ac convallis urna neque et neque. Vestibulum eu dapibus lacus. Proin sit amet faucibus est, nec venenatis mi. Suspendisse nisi metus, porta a rhoncus vitae, laoreet ultrices neque.</p>
              </div>
              <div>
                <img src="../images/beach.jpg" alt="">
                <h1>Lorem ipsum</h1>
                <p>Donec fermentum dignissim dui, eu hendrerit tellus pellentesque in. Cras nec pretium nisl. Donec tempor sodales ligula. Nulla sodales vel risus eu ullamcorper. Curabitur ante nisl, dapibus quis quam ac, eleifend eleifend orci.</p>
              </div>
               <div>
                <img src="images/beach.jpg" alt="">
                <h1>Lorem ipsum</h1>
                <p>Donec fermentum dignissim dui, eu hendrerit tellus pellentesque in. Cras nec pretium nisl. Donec tempor sodales ligula. Nulla sodales vel risus eu ullamcorper. Curabitur ante nisl, dapibus quis quam ac, eleifend eleifend orci.</p>
              </div>
              <div>
                <img src="images/beach.jpg" alt="">
                <h1>Dolor set</h1>
                <p>Mauris tristique, massa sed ullamcorper congue, dui lorem vehicula libero, ac convallis urna neque et neque. Vestibulum eu dapibus lacus. Proin sit amet faucibus est, nec venenatis mi. Suspendisse nisi metus, porta a rhoncus vitae, laoreet ultrices neque.</p>
              </div>
            </div>
          </div>
        </section>

        <section>
          <div>
            <h1>Lorem ipsum dolor set</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at auctor tortor. Donec sodales velit ante, id bibendum libero consequat vel. Maecenas diam nunc, scelerisque sit amet dui ut, posuere vehicula quam. Quisque a odio vel elit fringilla hendrerit. Nullam iaculis sollicitudin tortor sed accumsan. In consequat maximus malesuada. Etiam nec odio eget lorem condimentum ornare. In sit amet tincidunt lorem.</p>
            <p>Pellentesque cursus, augue ut cursus egestas, magna nisl efficitur urna, ut molestie nisl urna in massa. Ut gravida convallis enim. In eget hendrerit ante. Aenean viverra lacus malesuada lectus accumsan commodo. Ut a ullamcorper lorem, id porta est. Cras venenatis turpis in ex pulvinar, at vestibulum metus bibendum. Etiam in tincidunt odio, et pulvinar eros. Integer a luctus odio, quis sollicitudin dolor. Cras vel tempus sapien.</p>
          </div>
        </section>

        <section>
          <div>
            <h1>Zie ook</h1>
            <div class="column-3">
              <nav aria-label="Voorbeeld navigatie-element">
                <ul>
                  <li><a href="">Lorem ipsum</a></li>
                  <li><a href="">Dolor</a></li>
                  <li><a href="">Set amet</a></li>
                  <li><a href="">Adipiscing elit</a></li>
                </ul>
              </nav>
              <nav aria-label="Voorbeeld navigatie-element">
                <ul>
                  <li><a href="">Lorem ipsum</a></li>
                  <li><a href="">Dolor</a></li>
                  <li><a href="">Set amet</a></li>
                  <li><a href="">Adipiscing elit</a></li>
                </ul>
              </nav>
              <nav aria-label="Voorbeeld navigatie-element">
                <ul>
                  <li><a href="" rel="external">Lorem ipsum</a></li>
                  <li><a href="" rel="external">Dolor</a></li>
                  <li><a href="" rel="external">Set amet</a></li>
                </ul>
              </nav>
            </div>
          </div>
        </section>
      </div>
    </section>
  </main>

  <footer>
    <div>
      <span>De Rijksoverheid. Voor Nederland</span>
    </div>
  </footer>
</html>