Full Width

Component preview opent in nieuw tabblad

There are no notes for this item.

<header>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle dso-secondary" aria-expanded="false">
                <dso-icon icon="bars"></dso-icon>
                <span class="sr-only">Menu</span>
            </button>
        </div>

        <ul class="dso-nav dso-nav-main">
            <li class="dso-active">
                <a href="#" aria-current="page">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li>
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>

</header>
<main>
    <div class="row dso-featured">
        <div class="col-md-6">
            <div class="dso-rich-content">
                <h2>Welkom</h2>
                <p>Op deze testpagina</p>
                <h3>What is Lorem Ipsum?</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
                    dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                    passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
        <div class="col-md-6">
            <dl>
                <dt>Description lists:</dt>
                <dd>A description list is perfect for defining terms.</dd>
                <dt>Euismod:</dt>
                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                <dt>Malesuada porta:</dt>
                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                <dt>Felis euismod semper eget lacinia:</dt>
                <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
            </dl>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="dso-rich-content">
                <ul class="list-group">
                    <li class="list-group-item">
                        Cras justo odio
                    </li>
                    <li class="list-group-item">
                        Dapibus ac facilisis in
                    </li>
                    <li class="list-group-item">
                        Morbi leo risus
                    </li>
                    <li class="list-group-item">
                        Porta ac consectetur ac
                    </li>
                    <li class="list-group-item">
                        Vestibulum at eros
                    </li>
                </ul>

            </div>
        </div>
        <div class="col-md-6">

            <table class="table">
                <caption class="sr-only">Overzicht van gebruikersnamen</caption>
                <thead>
                    <tr>
                        <th scope="col">Nummer</th>
                        <th scope="col">Voornaam</th>
                        <th scope="col">Achternaam</th>
                        <th scope="col">
                            GitHub gebruikersnaam

                        </th>
                        <th scope="col">Modifier</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td><a href="#fabien">Fabien</a></td>
                        <td>Potencier</td>
                        <td>fabpot</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td><a href="#andrew">Andrew</a></td>
                        <td>Nesbitt</td>
                        <td>andrew</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">

                            3
                        </th>
                        <td><a href="#taylor">Taylor</a></td>
                        <td>Otwell</td>
                        <td>taylorotwell</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">4</th>
                        <td><a href="#kitty">Kitty</a></td>
                        <td>Giraudel</td>
                        <td>KittyGiraudel</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="row dso-featured">
        <div class="col-md-12">
            <div class="dso-jumbotron">
                <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                <div class="dso-jumbotron-body">
                    <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                    <div class="dso-jumbotron-cta">
                        <button type="button" class="dso-tertiary">
                            <dso-icon icon="angle-right"></dso-icon><span>Aan de slag</span>
                        </button>
                    </div>
                </div>
                <div class="dso-jumbotron-image">
                    <img src="../../dummy/images/sneeuwpop.png" alt="Afbeelding van een sneeuwpop">
                </div>
            </div>

        </div>
    </div>

    <div class="dso-rich-content">
        <h2>History (h2)</h2>
        <p>
            See also:
            <a href="https://en.wikipedia.org/wiki/Timeline_of_The_Hague" class="extern" target="_blank" rel="noopener noreferrer">Timeline of The Hague<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

        </p>
        <h3>Early history (h3)</h3>
        <p>
            The Hague originated around 1230, when Count Floris IV of Holland purchased land alongside a pond, the present-day Hofvijver, in order to build a hunting residence. In 1248, his son and successor William II, King of the Romans, decided to extend the residence to a palace, which would later be called the Binnenhof (Inner Court). He died in 1256 before this palace was completed but parts of it were finished by his son Floris V, of which the Ridderzaal (Knights' Hall), still intact, is the most prominent.
        </p>
        <h4>Trivia (h4)</h4>
        <ul>
            <li>
                The village that originated around the Binnenhof was first mentioned as Haga in a charter dating from 1242. In the 15th century, des Graven hage came into use, literally "The Count's Wood", with connotations like "The Count's Hedge, Private Enclosure or Hunting Grounds".
            </li>
            <li>
                's-Gravenhage was officially used for the city from the 17th century onwards. Today, this name is only used in some official documents like birth and marriage certificates. The city itself uses "Den Haag" in all its communication.
            </li>
        </ul>
        <h5>More information (h5)</h5>
        <p>
            See <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank" rel="noopener noreferrer">Wikipedia<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

        </p>
        <h3>Modern history (h3)</h3>
        <p>
            Only in 1806, when the <a href="https://en.wikipedia.org/wiki/Kingdom_of_Holland" class="extern" target="_blank" rel="noopener noreferrer">Kingdom of Holland<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>
            was a puppet state of the First French Empire, was the settlement granted city rights by Louis Bonaparte. After the Napoleonic Wars, modern-day Belgium and the Netherlands were combined in the United Kingdom of the Netherlands to form a buffer against France. As a compromise, Brussels and Amsterdam alternated as capital every two years, with the government remaining in The Hague. After the separation of Belgium in 1830, Amsterdam remained the capital of the Netherlands, while the government was situated in The Hague. When the government started to play a more prominent role in Dutch society after 1850, The Hague quickly expanded. Many streets were specifically built for the large number of civil servants employed in the country's government and for the Dutchmen who were retiring from the administration of the Netherlands East Indies.
        </p>
        <h4>World War II (h4)</h4>
        <p>
            The city sustained heavy damage during World War II. Many Jews were killed during the German occupation. Additionally, the Atlantic Wall was built through the city, causing a large quarter to be torn down by the Nazi occupants. On 3 March 1945, the Royal Air Force mistakenly bombed the Bezuidenhout quarter. The target was an installation of V-2 rockets in the nearby Haagse Bos park, but because of navigational errors, the bombs fell on a heavily populated and historic part of the city. The bombardment wreaked widespread destruction in the area and caused 511 fatalities.
        </p>
        <h5>More information (h5)</h5>
        <p>
            See <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank" rel="noopener noreferrer">Wikipedia<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

        </p>
    </div>

    <div class="row dso-featured">
        <div class="col-md-12">
            <div class="dso-jumbotron">
                <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                <div class="dso-jumbotron-body">
                    <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                </div>
                <div class="dso-jumbotron-image">
                    <img src="../../dummy/images/sneeuwpop.png" alt="Afbeelding van een sneeuwpop">
                </div>
            </div>

        </div>
    </div>

    <div class="dso-jumbotron">
        <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
        <div class="dso-jumbotron-body">
            <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
            <div class="dso-jumbotron-cta">
                <button type="button" class="dso-tertiary">
                    <dso-icon icon="angle-right"></dso-icon><span>Aan de slag</span>
                </button>
            </div>
        </div>
    </div>

</main>
<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Basic link</h2>
            <ul class="dso-link-list">
                <li><a href="#">Normale link</a></li>
                <li><a href="#">Test link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Externe links</h2>
            <ul class="dso-link-list">
                <li><a href="#" class="extern">Externe link</a></li>
                <li><a href="#" class="extern">Extra externe link</a></li>
                <li><a href="#" class="extern">Laatste externe link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Tekst paragraaf</h2>
            <p>
                Loop goed na welke inhoud essentieel is voor de footer. CreeΓ«r met ros en cols de gewenste indeling van uw footer.
            </p>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Combinatie links en tekst</h2>
            <p>
                Tekst kan worden gevolgd door verscheidene <a href="#">links</a>.
            </p>
            <ul class="dso-link-list">
                <li><a href="#">Combinatie link</a></li>
                <li><a href="#">Combinatie link 2</a></li>
            </ul>
        </div>
    </div>
</footer>
<header>
  {% render '@navigations' %}
</header>
<main>
  <div class="row dso-featured">
    <div class="col-md-6">
      <div class="dso-rich-content">
        <h2>Welkom</h2>
        <p>Op deze testpagina</p>
        <h3>What is Lorem Ipsum?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
          dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
          specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
          essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
          passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
    <div class="col-md-6">
      <dl>
        <dt>Description lists:</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Euismod:</dt>
        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
        <dt>Malesuada porta:</dt>
        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
        <dt>Felis euismod semper eget lacinia:</dt>
        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
      </dl>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="dso-rich-content">
        {% render '@lists--list-group' %}
      </div>
    </div>
    <div class="col-md-6">
      {% render '@table' %}
    </div>
  </div>

  <div class="row dso-featured">
    <div class="col-md-12">
      {% render '@jumbotron--image-button' %}
    </div>
  </div>

  <div class="dso-rich-content">
    <h2>History (h2)</h2>
    <p>
      See also:
      {% render '@anchor', {label: 'Timeline of The Hague', url: 'https://en.wikipedia.org/wiki/Timeline_of_The_Hague', modifier: 'extern') %}
    </p>
    <h3>Early history (h3)</h3>
    <p>
      The Hague originated around 1230, when Count Floris IV of Holland purchased land alongside a pond, the present-day Hofvijver, in order to build a hunting residence. In 1248, his son and successor William II, King of the Romans, decided to extend the residence to a palace, which would later be called the Binnenhof (Inner Court). He died in 1256 before this palace was completed but parts of it were finished by his son Floris V, of which the Ridderzaal (Knights' Hall), still intact, is the most prominent.
    </p>
    <h4>Trivia (h4)</h4>
    <ul>
      <li>
        The village that originated around the Binnenhof was first mentioned as Haga in a charter dating from 1242. In the 15th century, des Graven hage came into use, literally "The Count's Wood", with connotations like "The Count's Hedge, Private Enclosure or Hunting Grounds".
      </li>
      <li>
        's-Gravenhage was officially used for the city from the 17th century onwards. Today, this name is only used in some official documents like birth and marriage certificates. The city itself uses "Den Haag" in all its communication.
      </li>
    </ul>
    <h5>More information (h5)</h5>
    <p>
      See {% render '@anchor', {label: "Wikipedia", url: 'https://en.wikipedia.org/wiki/The_Hague', modifier: 'extern') %}
    </p>
    <h3>Modern history (h3)</h3>
    <p>
      Only in 1806, when the {% render '@anchor', {label: 'Kingdom of Holland', url: 'https://en.wikipedia.org/wiki/Kingdom_of_Holland', modifier: 'extern') %} was a puppet state of the First French Empire, was the settlement granted city rights by Louis Bonaparte. After the Napoleonic Wars, modern-day Belgium and the Netherlands were combined in the United Kingdom of the Netherlands to form a buffer against France. As a compromise, Brussels and Amsterdam alternated as capital every two years, with the government remaining in The Hague. After the separation of Belgium in 1830, Amsterdam remained the capital of the Netherlands, while the government was situated in The Hague. When the government started to play a more prominent role in Dutch society after 1850, The Hague quickly expanded. Many streets were specifically built for the large number of civil servants employed in the country's government and for the Dutchmen who were retiring from the administration of the Netherlands East Indies.
    </p>
    <h4>World War II (h4)</h4>
    <p>
      The city sustained heavy damage during World War II. Many Jews were killed during the German occupation. Additionally, the Atlantic Wall was built through the city, causing a large quarter to be torn down by the Nazi occupants. On 3 March 1945, the Royal Air Force mistakenly bombed the Bezuidenhout quarter. The target was an installation of V-2 rockets in the nearby Haagse Bos park, but because of navigational errors, the bombs fell on a heavily populated and historic part of the city. The bombardment wreaked widespread destruction in the area and caused 511 fatalities.
    </p>
    <h5>More information (h5)</h5>
    <p>
      See {% render '@anchor', {label: 'Wikipedia', url: 'https://en.wikipedia.org/wiki/The_Hague', modifier: 'extern') %}
    </p>
  </div>

  <div class="row dso-featured">
    <div class="col-md-12">
      {% render '@jumbotron--image' %}
    </div>
  </div>

  {% render '@jumbotron--button' %}
</main>
{% render '@footer' %}
/* No context defined for this component. */