DSO Component Library

Form Field Info 

<div class="dso-field-info">
    <button type="button">
        <span class="sr-only">Sluiten</span>
    </button>
    <div class="dso-rich-content">
        <h2>Heading 2</h2>
        <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit amet, porta semper est.
            Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.
            Praesent consequat ligula id tortor elementum pretium. Integer ligula justo, volutpat sed tellus eu, faucibus fringilla lectus.</p>

    </div>
</div>
 
<div class="dso-field-info">
  <button type="button">
    <span class="sr-only">Sluiten</span>
  </button>
  <div class="dso-rich-content">
    {{{ infoText }}}
  </div>
</div>
 
infoText: >
  <h2>Heading 2</h2>

  <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit.
  Nullam non metus dolor. Pellentesque velit arcu, pellentesque at lacus sit
  amet, porta semper est.

  Praesent mollis lorem lorem, non varius nisl lacinia et. Integer quis
  sollicitudin arcu. Nullam lacinia non ipsum sit amet varius.

  Praesent consequat ligula id tortor elementum pretium. Integer ligula justo,
  volutpat sed tellus eu, faucibus fringilla lectus.</p>

Een toelichting bij form-group. De info-link faciliteert het tonen van extra informatie. De class op het icoon togglt van fa-chevron-down naar fa-chevron-down. Afbeeldingen worden in het midden uitgelijnd

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>Heading 2</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.

<span class="sr-only">Sluiten</span>

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

Check that the title element describes the document.

<title>Default

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"> <span class="sr-only">Sluiten</span> </button>