Jumbotron

Plaatst een lichtgewicht, flexibel component dat optioneel de gehele breedte van de viewport kan bevatten om belangrijke content van je site te tonen. Gebaseerd op Bootstrap Jumbotron.

<!-- Default -->
<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>
<!-- Button -->
<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="btn btn-link">
                <dso-icon icon="angle-right"></dso-icon><span>Aan de slag</span>
            </button>
        </div>
    </div>
</div>
<!-- Image -->
<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/avatar.png" alt="Alternatieve tekst">
    </div>
</div>
<!-- Image Button -->
<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="btn btn-link">
                <dso-icon icon="angle-right"></dso-icon><span>Aan de slag</span>
            </button>
        </div>
    </div>
    <div class="dso-jumbotron-image">
        <img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">
    </div>
</div>
<div class="dso-jumbotron">
  <h2 class="dso-jumbotron-title">{{ title }}</h2>
  <div class="dso-jumbotron-body">
    <p>{{ content }}</p>
    {%- if button %}
      <div class="dso-jumbotron-cta">
        {% render '@button', button -%}
      </div>
    {% endif -%}
  </div>
  {%- if image %}
    <div class="dso-jumbotron-image">
      {% render '@image', image %}
    </div>
  {% endif -%}
</div>
/* Default */
__title: Jumbotron
title: Aan de slag met de Omgevingswet
content: >-
  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.
/* Button */
__title: Jumbotron met Button
title: Aan de slag met de Omgevingswet
content: >-
  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.
_rowModifier: full-width
button:
  label: Aan de slag
  type: button
  modifier: link
  state: standard
  icon: angle-right
/* Image */
__title: Jumbotron met Image
title: Aan de slag met de Omgevingswet
content: >-
  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.
image:
  source: /dummy/images/avatar.png
  alt: Alternatieve tekst
/* Image Button */
__title: Jumbotron met Button en Image
title: Aan de slag met de Omgevingswet
content: >-
  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.
image:
  source: /dummy/images/avatar.png
  alt: Alternatieve tekst
button:
  label: Aan de slag
  type: button
  modifier: link
  state: standard
  icon: angle-right