Call to action
Example
Markup
<div class="c-button-set">
<a href="#" class="c-button-set__link c-button-set__link--edit" role="button">
<span class="icon icon-plus">
</span>
<span>
Create<span class="u-visuallyhidden"> new record</span>
</span>
</a>
<span class="c-button-set__link-separator" aria-hidden="true"></span>
<a href="#" class="c-button-set__link" role="button">
<span class="icon icon-pencil">
</span>
<span>
Edit<span class="u-visuallyhidden"> record</span>
</span>
</a>
<span class="c-button-set__link-separator" aria-hidden="true"></span>
<a href="#" class="c-button-set__link c-button-set__link--show-all" role="button">
<span class="icon icon-checkbox-unchecked">
</span>
<span>
Show all<span class="u-visuallyhidden"> records</span>
</span>
</a>
<span class="c-button-set__link-separator" aria-hidden="true"></span>
<a href="#" id="HelpButton" class="c-button-set__link" role="button" aria-controls="HelpText" aria-expanded="false">
<span class="icon icon-question">
</span>
<span>
Help
</span>
</a>
</div>
Guidance
- The call to action button set should be positioned top right of the page content
Document
Markup
<a href="/media/syjdol0i/caa-frontend-v1-0-0.zip" class="c-document">
<span class="icon icon-download3">
<span class="path"></span>
</span>
<span class="c-document__link">
CAA Frontend v1.0.0
- 28 Jun 2023 </span>
<span class="c-document__description">ZIP, 822KB</span>
</a>
Provide page feedback
Please enter your comments below, or use our usual service contacts if a specific matter requires an answer.
Fields marked with an asterisk (*) are required.