DSO Component Library

Call To Action: 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}}
 
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>