DSO Component Library

Call To Action 

<!-- Button Cta Primary -->
<button type="button" class="cta-primary">
    Verstuur feedback
  </button>


<!-- Button Cta Default -->
<button type="button" class="cta-default">
    Meld ongewenst gedrag
  </button>


<!-- Anchor Cta Primary -->
<a href="#" class="cta-primary">
    Vraag nu vergunning aan
  </a>


<!-- Anchor Cta Default -->
<a href="#" class="cta-default">
    E-mail de redactie
  </a>


{{#if button}}
  <button type="button" class="cta-{{ modifier }}">
    {{ value }}
  </button>
{{else if anchor}}
  <a href="{{ url }}" class="cta-{{ modifier }}">
    {{ value }}
  </a>
{{/if}}
 
/* Button Cta Primary */
button: true
value: Verstuur feedback
modifier: primary



/* Button Cta Default */
button: true
value: Meld ongewenst gedrag
modifier: default



/* Anchor Cta Primary */
anchor: true
value: Vraag nu vergunning aan
modifier: primary
url: '#'



/* Anchor Cta Default */
anchor: true
value: E-mail de redactie
modifier: default
url: '#'

De class cta-primary en cta-default kunnen alleen op elementen van het type a of button geplaatst worden

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H48

If this element contains a navigation section, it is recommended that it be marked up as a list.

<div class="container"> <!-- Start: @call-to-action--button-cta-primary --> <button type="button" class="cta-primary"> Verstuur feedback </button> <!-- End: @call-to-action--button-cta-primary --><hr> <!-- Start: @call-to-action--button-cta-default --> <button type="button" class="cta-default"> Meld ongewenst gedrag </button> <!-- End: @call-to-action--button-cta-default --><hr> <!-- Start: @call-to-action--anchor-cta-primary --> <a href="#" class="cta-primary"> Vraag nu vergunning aan </a> <!-- End: @call-to-action--anchor-cta-primary --><hr> <!-- Start: @call-to-action--anchor-cta-default --> <a href="#" class="cta-default"> E-mail de redactie </a> <!-- End: @call-to-action--anchor-cta-default --><hr> </div>

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.

<button type="button" class="cta-primary"> Verstuur feedback </button>

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

Check that the title element describes the document.

<title>Call To Action

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 href="#" class="cta-primary"> Vraag nu vergunning aan </a>

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="cta-primary"> Verstuur feedback </button>