Row Equal Heights

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"><svg class="di di-user">
                        <use href="../../dso-icons.svg#user" />
                    </svg><span>Inloggen</span></a></div>
        </div>
    </div>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle">
                <svg class="di di-bars">
                    <use href="../../dso-icons.svg#bars" />
                </svg>
                <span class="sr-only">Ga naar 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="#">
                    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="//schema.org/BreadcrumbList">
            <li itemscope="" itemprop="itemListElement" itemtype="//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="//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">
            <div class="dso-highlight-box dso-drop-shadow">
                <code>col-sm-12 col-md-6 col-lg-3</code>

            </div>

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

            </div>

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

            </div>

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

            </div>

        </div>
    </div>

    <div class="row dso-equal-heights">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    1
                </div>

                <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>

            </div>

        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-yellow dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    2
                </div>

                <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>

            </div>

        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    3
                </div>

                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Oninteressant blokje</p>
                </div>

            </div>

        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="dso-highlight-box dso-drop-shadow dso-has-counter">
                <div class="dso-step-counter">
                    4
                </div>

                <div class="dso-rich-content">
                    <h2>Ongelijke inhoud</h2>
                    <p>Aha</p>
                </div>

            </div>

        </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"><svg class="di di-angle-right">
                            <use href="../../dso-icons.svg#angle-right" />
                        </svg><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"><svg class="di di-angle-right">
                            <use href="../../dso-icons.svg#angle-right" />
                        </svg><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"><svg class="di di-angle-right">
                            <use href="../../dso-icons.svg#angle-right" />
                        </svg><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>
</footer>
{% render '@header' %}

<main>
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {% endcontainer %}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {% endcontainer %}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {% endcontainer %}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-drop-shadow' } %}
        <code>col-sm-12 col-md-6 col-lg-3</code>
      {% endcontainer %}
    </div>
  </div>

  <div class="row dso-equal-heights">
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-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>
      {% endcontainer %}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-yellow dso-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>
      {% endcontainer %}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-drop-shadow', step: 3 } %}
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Oninteressant blokje</p>
        </div>
      {% endcontainer %}
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      {% container '@highlight-box', { modifier: 'dso-drop-shadow', step: 4 } %}
        <div class="dso-rich-content">
          <h2>Ongelijke inhoud</h2>
          <p>Aha</p>
        </div>
      {% endcontainer %}
    </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 } %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxLarge.label } %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxSmall.label } %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxLarge.label } %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxSmall.label } %}
    </div>
    <div class="col-lg-2 col-md-4 col-xs-6">
      {% render '@whitebox-small', { label: whiteboxLarge.label } %}
    </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
whiteboxLarge:
  label: Lang verhaal waardoor dit blok hoger op je scherm wordt