DSO Component Library

Jumbotron 

<div class="jumbotron">
    <h1>Aan de slag met de Omgevingswet</h1>
    <p>Dit is een testcomponent genaamd &#x27;jumbotron&#x27;</p>
    <p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Leer meer</a>
    </p>
</div>
 
<div class="jumbotron">
  <h1>{{ title }}</h1>
  <p>{{ content }}</p>
  <p>
    <a class="btn btn-primary btn-lg" href="#" role="button">{{ ctaText }}</a>
  </p>
</div>
 
title: Aan de slag met de Omgevingswet
content: Dit is een testcomponent genaamd 'jumbotron'
ctaText: Leer meer

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

<h1>Aan de slag met de Omgevingswet</h1>

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

Check that the title element describes the document.

<title>Default

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a class="btn btn-primary btn-lg" href="#" role="button">Leer meer</a>