<div class="row flex-row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<a href="#" class="flex-item box-link bg-purple fg-white padding10">
<h2>Improving student employability</h2>
<p>How you can work with us to improve student employability</p>
</a>
</div>
</div>
To vertically equalise the heights, use flex-row along with the row class and flex-item class on the link.
Background classes available
Use fg-white with the following background colours:
bg-bluebg-charcoalbg-darkgreybg-greenbg-pinkbg-purplebg-blackbg-red
Use fg-black or fg-darkgrey with the following background colour:
Other background classes should not be used
Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.0 Level AA, the following classes for background colours should not be used: bg-aqua, bg-gold, bg-lime and bg-yellow.
Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.1 Level AA, the colours Aqua, Gold, Lime and Yellow should not be used.
This includes the following CSS classes:
- Backgrounds
bg-aqua, bg-gold, bg-lime and bg-yellow
Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/