DSO Toolkit homepage

Row Equal Heights

Component preview opent in nieuw tabblad

There are no notes for this item.

<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <div class="dso-login">
                <a href="" class="btn btn-link">
                    <dso-icon icon="user"></dso-icon><span>Inloggen</span>
                </a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle btn btn-default" 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>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li class="dso-active">
                <a href="#" aria-current="page">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>

    <nav aria-label="U bevindt zich hier:">
        <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
            <li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem">
                <a itemprop="item" href="#">
                    <span itemprop="name">Home</span>
                </a>
                <meta itemprop="position" content="1" />
            </li>
            <li class="active" aria-current="page" itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem">
                <span itemprop="name">Checken</span>
                <meta itemprop="position" content="2" />
            </li>
        </ol>
    </nav>

</header>

<main>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box drop-shadow>
                <code>col-sm-12 col-md-6 col-lg-3</code>
            </dso-highlight-box>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box drop-shadow>
                <code>col-sm-12 col-md-6 col-lg-3</code>
            </dso-highlight-box>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box drop-shadow>
                <code>col-sm-12 col-md-6 col-lg-3</code>
            </dso-highlight-box>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box drop-shadow>
                <code>col-sm-12 col-md-6 col-lg-3</code>
            </dso-highlight-box>
        </div>
    </div>

    <div class="row dso-equal-heights">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box drop-shadow step="1">
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Zodra een <code>.row</code> een <code>.dso-equal-heights</code> krijgt, worden voor de volgende componenten de kolommen visueel even hoog:</p>
                    <ul>
                        <li>Highlight Box</li>
                        <li>Whitebox</li>
                        <li>Whitebox small</li>
                    </ul>
                </div>
            </dso-highlight-box>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box yellow drop-shadow step="2">
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Dit blok is hoger, dit blok heeft meer te vertellen omdat het een veel boeiender blok is. Mijn broertjes zijn minder interessant, dat zie je aan de inhoud</p>
                    <p>PS: Ik ben het tweede blokje</p>
                </div>
            </dso-highlight-box>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box drop-shadow step="3">
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Oninteressant blokje</p>
                </div>
            </dso-highlight-box>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <dso-highlight-box drop-shadow step="4">
                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Aha</p>
                </div>
            </dso-highlight-box>
        </div>
    </div>

    <div class="row dso-equal-heights">
        <div class="col-lg-2 col-md-4 col-xs-6">
            <div class="dso-whitebox-small">
                <a href="#">
                    <span class="dso-whitebox-icon">
                        <img src="../../dummy/images/icon-tree.png" />
                    </span>
                    <span class="dso-whitebox-link">
                        Kort verhaal
                    </span>
                </a>
            </div>

        </div>
        <div class="col-lg-2 col-md-4 col-xs-6">
            <div class="dso-whitebox-small">
                <a href="#">
                    <span class="dso-whitebox-icon">
                        <img src="../../dummy/images/icon-tree.png" />
                    </span>
                    <span class="dso-whitebox-link">
                        Lang verhaal waardoor dit blok hoger op je scherm wordt
                    </span>
                </a>
            </div>

        </div>
        <div class="col-lg-2 col-md-4 col-xs-6">
            <div class="dso-whitebox-small">
                <a href="#">
                    <span class="dso-whitebox-icon">
                        <img src="../../dummy/images/icon-tree.png" />
                    </span>
                    <span class="dso-whitebox-link">
                        Kort verhaal
                    </span>
                </a>
            </div>

        </div>
        <div class="col-lg-2 col-md-4 col-xs-6">
            <div class="dso-whitebox-small">
                <a href="#">
                    <span class="dso-whitebox-icon">
                        <img src="../../dummy/images/icon-tree.png" />
                    </span>
                    <span class="dso-whitebox-link">
                        Lang verhaal waardoor dit blok hoger op je scherm wordt
                    </span>
                </a>
            </div>

        </div>
        <div class="col-lg-2 col-md-4 col-xs-6">
            <div class="dso-whitebox-small">
                <a href="#">
                    <span class="dso-whitebox-icon">
                        <img src="../../dummy/images/icon-tree.png" />
                    </span>
                    <span class="dso-whitebox-link">
                        Kort verhaal
                    </span>
                </a>
            </div>

        </div>
        <div class="col-lg-2 col-md-4 col-xs-6">
            <div class="dso-whitebox-small">
                <a href="#">
                    <span class="dso-whitebox-icon">
                        <img src="../../dummy/images/icon-tree.png" />
                    </span>
                    <span class="dso-whitebox-link">
                        Lang verhaal waardoor dit blok hoger op je scherm wordt
                    </span>
                </a>
            </div>

        </div>
    </div>

    <div class="row dso-equal-heights">
        <div class="col-md-4 col-sm-6 col-xs-12 ">
            <div class="dso-whitebox">
                <div class="dso-whitebox-title">
                    <h2>Ik wil weten welke wetten en regels er gelden voor mijn huis/bedrijf.</h2>
                </div>
                <div class="dso-whitebox-link">
                    <a href="#" class="btn btn-link">
                        <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                    </a>
                </div>
                <div class="dso-whitebox-icon">
                    <img src="../../dummy/images/indienen.png" alt="Indienen" />
                </div>
                <div class="dso-rich-content">
                    <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kunt u de aanvraag of melding direct indienen.</p>
                </div>
            </div>

        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 ">
            <div class="dso-whitebox">
                <div class="dso-whitebox-title">
                    <h2>Ik wil weten welke wetten en regels er gelden voor mijn huis/bedrijf.</h2>
                </div>
                <div class="dso-whitebox-link">
                    <a href="#" class="btn btn-link">
                        <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                    </a>
                </div>
                <div class="dso-whitebox-icon">
                    <img src="../../dummy/images/indienen.png" alt="Indienen" />
                </div>
                <div class="dso-rich-content">
                    <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kunt u de aanvraag of melding direct indienen.</p>
                </div>
            </div>

        </div>
        <div class="col-md-4 col-sm-6 col-xs-12 ">
            <div class="dso-whitebox">
                <div class="dso-whitebox-title">
                    <h2>Ik wil weten welke wetten en regels er gelden voor mijn huis/bedrijf.</h2>
                </div>
                <div class="dso-whitebox-link">
                    <a href="#" class="btn btn-link">
                        <dso-icon icon="angle-right"></dso-icon><span>Direct naar aanvragen</span>
                    </a>
                </div>
                <div class="dso-whitebox-icon">
                    <img src="../../dummy/images/indienen.png" alt="Indienen" />
                </div>
                <div class="dso-rich-content">
                    <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen? Dan kunt u de aanvraag of melding direct indienen.</p>
                </div>
            </div>

        </div>
    </div>
</main>

<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Service</h2>
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Over deze site</h2>
            <ul>
                <li><a href="#">Copyright</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Cookies</a></li>
                <li><a href="#">Toegankelijkheid</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Volg ons ook op</h2>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">LinkedIn</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Link list component</h2>
            <ul class="dso-link-list">
                <li>
                    <a href="#" class="extern" target="_blank" rel="noopener noreferrer">Externe link<span class="sr-only">(Opent andere website in nieuw tabblad)</span></a>

                </li>
                <li>
                    <a href="#" class="download">Download link</a>

                </li>
                <li>
                    <a href="#">Interne link</a>

                </li>
            </ul>

        </div>
    </div>
</footer>
{% render '@header' %}

<main>
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box drop-shadow>
        <code>col-sm-12 col-md-6 col-lg-3</code>
      </dso-highlight-box>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box drop-shadow>
        <code>col-sm-12 col-md-6 col-lg-3</code>
      </dso-highlight-box>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box drop-shadow>
        <code>col-sm-12 col-md-6 col-lg-3</code>
      </dso-highlight-box>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box drop-shadow>
        <code>col-sm-12 col-md-6 col-lg-3</code>
      </dso-highlight-box>
    </div>
  </div>

  <div class="row dso-equal-heights">
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box drop-shadow step="1">
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Zodra een <code>.row</code> een <code>.dso-equal-heights</code> krijgt, worden voor de volgende componenten de kolommen visueel even hoog:</p>
          <ul>
            <li>Highlight Box</li>
            <li>Whitebox</li>
            <li>Whitebox small</li>
          </ul>
        </div>
      </dso-highlight-box>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box yellow drop-shadow step="2">
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Dit blok is hoger, dit blok heeft meer te vertellen omdat het een veel boeiender blok is. Mijn broertjes zijn minder interessant, dat zie je aan de inhoud</p>
          <p>PS: Ik ben het tweede blokje</p>
        </div>
      </dso-highlight-box>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box drop-shadow step="3">
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Oninteressant blokje</p>
        </div>
      </dso-highlight-box>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      <dso-highlight-box drop-shadow step="4">
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Aha</p>
        </div>
      </dso-highlight-box>
    </div>
  </div>

  <div class="row dso-equal-heights">
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxSmall.label, source: whiteboxSmall.source } %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxLarge.label, source: whiteboxLarge.source} %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxSmall.label, source: whiteboxSmall.source} %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxLarge.label, source: whiteboxLarge.source} %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxSmall.label, source: whiteboxSmall.source} %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxLarge.label, source: whiteboxLarge.source} %}
    </div>
  </div>

  <div class="row dso-equal-heights">
    <div class="col-md-4 col-sm-6 col-xs-12 ">
      {% render '@whitebox-regular' %}
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 ">
      {% render '@whitebox-regular' %}
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12 ">
      {% render '@whitebox-regular' %}
    </div>
  </div>
</main>

{% render '@footer' %}
whiteboxSmall:
  label: Kort verhaal
  source: /dummy/images/icon-tree.png
whiteboxLarge:
  label: Lang verhaal waardoor dit blok hoger op je scherm wordt
  source: /dummy/images/icon-tree.png