Blocks
Right hand content
These are content blocks used in the right hand column including basic links to pages, documents, email addresses and phone numbers.
For other types of right hand column content, see the individual pages for related links, contact boxes and social media links.
Basic call to action link (CTA)
<div class="block-right">
<a class="block-link p10 bg-aqua fg-white" href="http://www.brookes.ac.uk/research/research-news/">
<h2 class="hblack">Research news »</h2>
</a>
</div>Use the class block-right to wrap the content.
Background classes available
Only use with fg-white, except when using bg-lightgrey when you can use fg-black or fg-darkgrey.
bg-blackbg-bluebg-charcoalbg-darkgreybg-greenbg-purplebg-lightgrey- use withfg-blackorfg-darkgrey
Other background classes available
The use of following text box classes should only be used with caution.
bg-pinkbg-red
The use of following text box classes has now been deprecated.
bg-limebg-yellowbg-goldbg-aqua
For users with visual impairments, the use of the classes bg-lime, bg-yellow, bg-gold and bg-aqua has now been deprecated. These colours should not be used.
The use of text box classes bg-pink and bg-red should only be used with caution.
Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/
Basic link with heading
<div class="block-right">
<a class="block-link p10 bg-charcoal fg-white" href="#">
<h2 class="hblack">FAQs on Brexit »</h2>
<p>The latest updates from Oxford Brookes</p>
</a>
</div>Use the class block-right to wrap the content.
Background classes available
Only use with fg-white, except when using bg-lightgrey when you can use fg-black or fg-darkgrey.
bg-blackbg-bluebg-charcoalbg-darkgreybg-greenbg-purplebg-lightgrey- use withfg-blackorfg-darkgrey
Other background classes available
The use of following text box classes should only be used with caution.
bg-pinkbg-red
The use of following text box classes has now been deprecated.
bg-limebg-yellowbg-goldbg-aqua
For users with visual impairments, the use of the classes bg-lime, bg-yellow, bg-gold and bg-aqua has now been deprecated. These colours should not be used.
The use of text box classes bg-pink and bg-red should only be used with caution.
Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/
Phone link
<div class="block-right">
<a href="tel:+44-1865-484460" title="Call +44 (0) 1865 484460" class="block-link bg-pink fg-white padding10">
<h2 class="xs-title text-uppercase m0">Call us now</h2>
<p class="text-uppercase m0"><strong>+44 (0) 1865 484460</strong></p>
</a>
</div>Use the class block-right to wrap the content.
Background classes available
Only use with fg-white, except when using bg-lightgrey when you can use fg-black or fg-darkgrey.
bg-blackbg-bluebg-charcoalbg-darkgreybg-greenbg-purplebg-lightgrey- use withfg-blackorfg-darkgrey
Other background classes available
The use of following text box classes should only be used with caution.
bg-pinkbg-red
The use of following text box classes has now been deprecated.
bg-limebg-yellowbg-goldbg-aqua
For users with visual impairments, the use of the classes bg-lime, bg-yellow, bg-gold and bg-aqua has now been deprecated. These colours should not be used.
The use of text box classes bg-pink and bg-red should only be used with caution.
Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/
Blockquote
<div class="block-right">
<blockquote class="bg-black fg-white padding10">
<p>At the heart of Brookes' success is the excellent teaching on offer</p>
<cite>The Sunday Times University Guide 2010</cite>
</blockquote>
</div>Use the class block-right to wrap the content.
Background classes available
Only use with fg-white, except when using bg-lightgrey when you can use fg-black or fg-darkgrey.
bg-blackbg-bluebg-charcoalbg-darkgreybg-greenbg-purplebg-lightgrey- use withfg-blackorfg-darkgrey
Other background classes available
The use of following text box classes should only be used with caution.
bg-pinkbg-red
The use of following text box classes has now been deprecated.
bg-limebg-yellowbg-goldbg-aqua
For users with visual impairments, the use of the classes bg-lime, bg-yellow, bg-gold and bg-aqua has now been deprecated. These colours should not be used.
The use of text box classes bg-pink and bg-red should only be used with caution.
Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/
Blockquote with heading
<div class="block-right">
<blockquote class="bg-aqua fg-white padding10">
<h2>Oxford Brookes Vice Chancellor...</h2>
<p>...the Graduate College gives each and every research student a voice.</p>
<cite>Professor Alistair Fitt</cite>
</blockquote>
</div>Use the class block-right to wrap the content.
Background classes available
Only use with fg-white, except when using bg-lightgrey when you can use fg-black or fg-darkgrey.
bg-blackbg-bluebg-charcoalbg-darkgreybg-greenbg-purplebg-lightgrey- use withfg-blackorfg-darkgrey
Other background classes available
The use of following text box classes should only be used with caution.
bg-pinkbg-red
The use of following text box classes has now been deprecated.
bg-limebg-yellowbg-goldbg-aqua
For users with visual impairments, the use of the classes bg-lime, bg-yellow, bg-gold and bg-aqua has now been deprecated. These colours should not be used.
The use of text box classes bg-pink and bg-red should only be used with caution.
Colours tested with WebAIM Color Contrast Checker http://webaim.org/resources/contrastchecker/
Changelog
| Added | Updates | Current version | Accessibility | Status |
|---|---|---|---|---|
| 6 September 2018 | N/A | 1.0.0 | Accessible | Current |