We use necessary cookies to make our website work. We'd also like to use optional cookies to understand how you use it, and to help us improve it.

For more information, please read our cookie policy.

Call to action

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>