Timeline

Display a vertical plane timeline that is responsive on tablet and mobile viewports

This uses a combination of the panel group, a border class for the vertical line

u-b--line-middle

and badge classes for the month and date detail. The colours can be changed to other brand colours and the arrows hide on mobile and tablet viewports. This makes use of the flex box grid to display boxes on right side of the timeline on mobile and tablet viewports

Example

August

Results day for AS and A-levels, as well as our AQA Baccalaureate, Level 3 Extended Project Qualification (EPQ), Level 3 Certificate and Functional Skills qualifications.

Results day for GCSEs, as well as our AQA Certificate, ELC, FCSE, Projects, Technical Awards and PSE qualifications.

Code example

<div class="row row-inner c-panel__group  u-mt3">
    <div class="c-panel-group__item col-xs col-xs-12 col-sm-8 col-md-5 col-lg-5 col-xlg-5 nopadding-xs padding-half-md nopadding-left-md padding-half-lg padding-half-xlg nopadding-left-lg nopadding-left-xlg hide-mobile hide-tablet">
    </div>
    <div class="first-sm first-md col-xs col-xs-12 col-sm-3 col-md-3 col-lg-2 col-xlg-2 center-xs center-sm center-md u-b--line-middle  nopadding-sm nopadding-lg nopadding-xlg nopadding-md nopadding-xs">
    <p class="u-mt0 u-pb2"><span class="c-badge c-badge--large bg-brand-primary">August</span></p>
    </div>
</div>
    
<div class="row row-inner c-panel__group">
    <div class="c-panel-group__item col-xs col-xs-12  col-md-5 col-lg-5 col-xlg-5 nopadding-xs padding-half-md nopadding-right-md padding-half-lg padding-half-xlg nopadding-right-lg nopadding-right-xlg hide-mobile  hide-tablet nopadding-sm">
    </div>
    <div class="col-xs col-xs-12 col-sm-3 col-md-3 col-lg-2 col-xlg-2 u-b--line-middle center-xs   nopadding-sm nopadding-lg nopadding-xlg nopadding-md nopadding-xs">
        <p class="u-mt3"><span class="c-badge c-badge--circle c-badge--circle--large bg-brand-red">13</span></p>
    </div>
    <div class="c-panel-group__item col-xs col-xs-12 col-sm-9 last-sm col-md-9 last-md col-lg-5 col-xlg-5  nopadding-sm nopadding-lg nopadding-xlg nopadding-md nopadding-xs  c-panel__left--arrow--grey">
        <div class="c-panel bg-grey">
            <div class="c-panel__header u-mb0 u-pt1">
                <p class="u-mb0"><small>13 August</small></p>
                <h2 class="u-mt0-5 u-mb0 u-sh3">AS and A-level results day</h2>
            </div>
            <div class="c-panel__content u-pt0">
               Results day for AS and A-levels, as well as our AQA Baccalaureate, Level 3 Extended
               Project Qualification (EPQ), Level 3 Certificate and Functional Skills qualifications.
            </div>
            <div class="c-panel__content u-pt0"></div>
        </div>
    </div>
</div>
    
<div class="row row-inner c-panel__group">
    <div class="c-panel-group__item col-xs col-xs-12 col-sm-9 col-md-9 col-lg-5 col-xlg-5  nopadding-sm nopadding-lg nopadding-xlg nopadding-md nopadding-xs  c-panel__right--arrow--grey">
        <div class="c-panel bg-grey">
            <div class="c-panel__header u-mb0 u-pt1">
                <p class="u-mb0"><small>20 August</small></p>
                    <h2 class="u-mt0-5 u-mb0 u-sh3">GCSE results day</h2>
                    </div>
                <div class="c-panel__content u-pt0">
                    Results day for GCSEs, as well as our AQA Certificate, ELC, FCSE, Projects, Technical
                    Awards and PSE qualifications.
                </div>
            </div>
        </div>
        <div class="first-sm first-md col-xs col-xs-12 col-sm-3 col-md-3 col-lg-2 col-xlg-2 u-b--line-middle nopadding-sm nopadding-lg nopadding-xlg nopadding-md nopadding-xs center-xs"
                style="height:3rem;">
        <p class="u-mt3"><span class="c-badge c-badge--circle c-badge--circle--large bg-brand-red">20</span></p>
    </div>
</div>