DSO Component Library

Jumbotron: 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>
 
<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">
        {{> '@button' button }}
      </div>
    {{/if}}
  </div>
  {{#if image }}
    <div class="dso-jumbotron-image">
      {{> '@image' image }}
    </div>
  {{/if}}
</div>
 
__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

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.

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1_A.G141

The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element.

<h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>

NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G73,G74

If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.

<img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">

NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G94.Image

Ensure that the img element's alt text serves the same purpose and presents the same information as the image.

<img src="../../dummy/images/avatar.png" alt="Alternatieve tekst">

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Jumbotron

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<button type="button" class="btn btn-link"> <span class="icon fas fa-angle-right" aria-hidden="true"></span> Aan de slag </button>