Links

Links are designed to have sufficient contrast against their background colours, in order to adhere to our accessibility standards.

We use two types of link: individual and inline.

Individual

Individual links stand alone. They are normally blue with a chevron arrow to differentiate them from regular copy. On hover they are underlined and have a darker tint. On darker backgrounds, for example in the footer, links remain white in all states but are underlined on hover.

Example

This is an example of an individual link

Code example

<a href="#" class="c-icon c-icon--right c-icon__right-arrow--blue">This is an example of an individual link</a>

Inline

Inline links are designed to work seamlessly with normal copy. They are normally blue with no chevron. On hover they are underlined and have a darker tint.

Example

Here is an example of an inline link

Code example

<a href="#">inline link</a>

List of links

A list of links can be used to group similar links together.

Example

• Bengali
• Biology
• Business

Code example

<ul class="c-link__list">
    <li class="c-link__list__item">
        <a class="c-link__list__item__link" href="https://www.aqa.org.uk/subjects/bengali" title="Bengali">Bengali</a>
    </li>
    <li class="c-link__list__item">
        <a class="c-link__list__item__link" href="https://www.aqa.org.uk/subjects/biology" title="Biology">Biology</a>
    </li>
    <li class="c-link__list__item">
        <a class="c-link__list__item__link" href="https://www.aqa.org.uk/subjects/business" title="Business">Business</a>
    </li>
</ul>

Scrolling list of links

Using css classes to scroll the container

Example

• A-level
• AQA Certificate
• AS
• Applied General
• ELC
• FCSE
• FSMQ
• Functional Skills
• GCSE
• KS3
• Level 1/2 Award
• Project qualifications
• TVQ
• Technical Award

Code example

<ul class="c-scroll-list">
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#a-level">A-level</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#aqa_certificate">AQA Certificate</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#as">AS</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#applied_general">Applied General</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#elc">ELC</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#fcse">FCSE</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#fsmq">FSMQ</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#functional_skills">Functional Skills</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#gcse">GCSE</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#ks3">KS3</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#level_1_2_award">Level 1/2 Award</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#project_qualifications">Project qualifications</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#tvq">TVQ</a>
    </li> 
    <li class="c-scroll-list__item">
        <a class="c-scroll-list__item__link js-scroll-link" href="#technical_award">Technical Award</a>
    </li> 
</ul>

Please see navigation for more examples of specific link styles