Masthead

Masthead component formats a banner image and content to sit alongside each other and allow for a call to action

Standard product masthead

Switching to AQA

Find out what makes AQA different.

Request an information pack

Standard masthead banner with 50% flexgrid split as standard, image is placed first on tablet and mobile viewports.

Code example

<div class="c-masthead">
    <div class="c-masthead__content c-masthead__content--tablet-fullwidth c-masthead__content--mobile-fullwidth">
        <div class="col-xs middle-xs">
            <h1 class="c-masthead__content__heading">Switching to AQA</h1>
            <p>Find out what makes AQA different.</p>
            <a href="#" class="c-btn c-btn--primary c-btn--large u-ml0 ">Request an information pack</a>
        </div>
    </div>
    <div class="c-masthead__content c-masthead__content--media c-masthead__content--tablet-fullwidth c-masthead__content--mobile-fullwidth  col-xs first-md first-sm u-md-p0 u-sm-p0  u-md-mb0 u-sm-mb0">
        <a class="u-flex-shrink gtm-homepage-banner-1" href="#">
        <img src="48-Summer-results-homepage-banner.jpg" alt="Request an information pack"></a>
</div>

Masthead with background image, heading and text

Full width banner with opacity on the overlay is set to 90% using background:rgba(65,40,120,0.9) so that the Call to action button is solid colour. There is a mobile version which then only display the text body.

Mobile version example

<div class="row row-inner c-masthead" style="background-image: url('Banner-EPQ.jpg'); background-position:center; background-repeat:no-repeat;">
    <div class="c-masthead__content--no-border bg-brand-primary color-white col-xs col-xs-12 col-md-12 col-lg-6 col-xlg-5 hide-mobile" style="background:rgba(65,40,120,0.9)">
        <div class="col-xs middle-xs">
            <p class="color-white u-sh1 u-mt2 u-mb1-5 u-f-medium" style="line-height:1;">See your students' flourish with an EPQ </p>
        </div>
        <p>Build skills and experience with our Extended Project Qualification (EPQ)</p>
        <div>
            <a class="c-btn c-btn--primary c-btn--large u-mb2-5 u-t-center" id="js-tools" href="#">Get support and resources</a>
            <br>
        </div>
    </div>
    <div class="c-masthead__content--no-border bg-brand-primary color-white col-xs col-xs-12 col-md-12 col-lg-4 col-xlg-4 mobile-only" >
        <div class="col-xs middle-xs">
            <p class="color-white u-sh1 u-mt2 u-mb1-5 u-f-medium" style="line-height:1;">See your students flourish with an EPQ </p>
        </div>
        <p>Build skills and experience with our Extended Project Qualification (EPQ)</p>
        <div>
            <a class="c-btn c-btn--primary c-btn--large u-mb2-5 u-t-center" href="#">Get support and resources</a>
            <br>
        </div>
    </div>
</div>

Masthead with video embedded

Code sample

<div class="row row-inner c-masthead u-b--radius-bottom--right">
    <div class="c-masthead__content c-masthead__content--no-border  bg-brand-primary c-masthead__content--tablet-fullwidth c-masthead__content--mobile-fullwidth  u-md-p0 u-sm-p0  u-md-mb0 u-sm-mb0 u-b__mobile--radius-bottom--right u-b__tablet--radius-bottom--right">
        <div class="col-xs middle-xs">
        <p class="u-mt2"><span class="c-badge c-badge--large c-badge--light-new">Teaching from September 2023</span></p>
        <h1 class="color-white">Spark something <span style="color:#FCFF00"><strong>powerful</strong></span></h1>
        <p class="color-white u-sh5">Inspirational new texts and poetry for GCSE English Literature.</p>
        </div>
    </div>
    <div class="c-masthead__content c-masthead__content--media c-masthead__content--tablet-fullwidth c-masthead__content--mobile-fullwidth  col-xs  u-md-p0 u-sm-p0  u-md-mb0 u-sm-mb0 u-p0 first-sm first-md" >
        <div class="o-media o-media__video c-icon c-icon--large c-icon__anim-loading--purple u-pt0" style="padding-bottom:55.25%">
        <iframe src="https://www.youtube.com/embed/k0ipaHGKafg?rel=0" frameborder="0"
           allowfullscreen="" title="Spark something - new texts from modern writers" loading="lazy"></iframe>
        </div>
    </div> 
</div>

Masthead with video embedded and background images applied

Code example

<div class="c-masthead">
<div class="c-masthead__content c-masthead__content--media c-masthead__content--tablet-fullwidth c-masthead__content--mobile-fullwidth" style="align-items:unset;background-image:url('background-img')">
    <div class="col-xs middle-xs padding-half-sm u-xlg-pl2 u-lg-pl2">
    <h1 class="c-masthead__content__heading u-lg-mt0 u-mb2">Campaign Title</h1>
        <div class="u-mb1">Hero text</div> 
        <a href="#"  class="c-btn c-btn--large c-btn--primary u-ml0 u-sm-mt0 c-btn--primary">Call to action</a>
    </div>
</div>
<div class="c-masthead__content c-masthead__content--media c-masthead__content--tablet-fullwidth c-masthead__content--mobile-fullwidth  col-xs  u-md-p0 u-sm-p0  u-md-mb0 u-sm-mb0 u-p0 first-sm first-md   c-masthead__content--media ">
    <div class="o-media o-media__video c-icon c-icon--large c-icon__anim-loading--purple u-pt0" style="padding-bottom:55.25%">
        <iframe src="#" loading="lazy" frameborder="0"
            allowfullscreen="" title="yt video title"></iframe>
    </div>
</div>