DSO Component Library

# Jumbotron: Default

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <div class="dso-jumbotron">
        <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
        <div class="dso-jumbotron-body">
            <div class="dso-rich-content">
                <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>
    </div>

`
`

    <div class="dso-jumbotron">
      <h2 class="dso-jumbotron-title">{{ title }}</h2>
      <div class="dso-jumbotron-body">
        <div class="dso-rich-content">
          <p>{{ content }}</p>
        </div>
        {{#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
    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.

`

- Handle: @jumbotron--default
- Variants (4): Default , Button , Image , Image Button
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\02-content\jumbotron\jumbotron.hbs
- References (2): @button, @image

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 fa fa-angle-right" aria-hidden="true"></span> Aan de slag </button>`