Blocks
Banners
If your site is in Ektron, please use the Banners or Rotating Banners content module rather than copying and pasting this code.
Single banner

<div id="top-banner">
<img src="https://www.brookes.ac.uk/assets/0/1425/1426/2147484539/2147484540/2147485172/5d07753c-4ed1-4917-93e7-6fd8cc33e3ff.jpg?n=3645" alt="Student studying in the John Henry Brookes Building">
</div>
For banner image sizes, see /pattern-library/basics/images.html
If your site is in Ektron please use the Banners or Rotating Banners content module rather than copying and pasting the code.
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Banner with text overlay
<div id="top-banner">
<article id="slider">
<ul class="rslides">
<li>
<img src="https://www.brookes.ac.uk/assets/0/1425/1426/2147484539/2147484540/2147485172/5d07753c-4ed1-4917-93e7-6fd8cc33e3ff.jpg?n=3645" alt="Student studying in the John Henry Brookes Building">
<div class="slide-text ">
<a href="#">
<h2>Undergraduate study at Brookes</h2>
<h3>Oxford Brookes is home to some of the UK’s best university teaching »</h3>
</a>
</div>
</li>
</ul>
</article>
</div>
For banner image sizes, see images for correct sizes.
For text overlay colours, see text box colours for more information.
If your site is in Ektron please use the Banners or Rotating Banners content module rather than copying and pasting the code.
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Rotating banner
-
-
-
International students
Oxford Brookes is a vibrant, modern university »
-
-
International students
Oxford Brookes is a vibrant, modern university »
<div id="top-banner">
<article id="slider">
<ul class="rslides">
<li>
<img src="https://www.brookes.ac.uk/assets/0/1425/1426/2147484539/2147484540/2147485172/5d07753c-4ed1-4917-93e7-6fd8cc33e3ff.jpg?n=3645" alt="Student studying in the John Henry Brookes Building">
<div class="slide-text">
<a href="#">
<h2>John Henry Brookes Building</h2>
<h3>Oxford Brookes is home to some of the UK’s best university teaching »</h3>
</a>
</div>
</li>
<li>
<img src="https://www.brookes.ac.uk/assets/0/1425/1426/2147484539/2147484540/2147485172/5d07753c-4ed1-4917-93e7-6fd8cc33e3ff.jpg?n=3645" alt="Student studying in the John Henry Brookes Building">
<div class="slide-text bg-blue">
<a href="#">
<h2>Undergraduate study at Brookes</h2>
<h3>Oxford Brookes is home to some of the UK’s best university teaching »</h3>
</a>
</div>
</li>
<li>
<img src="https://www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147491987/b012b8a1-dbcc-4cbd-b0cb-c1744f7dbe27.jpg?n=3401" alt="Students and tutors in the John Henry Brookes Building">
<div class="slide-text bg-lime">
<h2>International students</h2>
<h3>Oxford Brookes is a vibrant, modern university »</h3>
</div>
</li>
<li>
<img src="https://www.brookes.ac.uk/assets/0/1425/1426/2147484539/2147484540/2147485172/5d07753c-4ed1-4917-93e7-6fd8cc33e3ff.jpg?n=3645" alt="Student studying in the John Henry Brookes Building">
<div class="slide-text bg-gold">
<a href="#" class="">
<h2>Undergraduate study at Brookes</h2>
<h3>Oxford Brookes is home to some of the UK’s best university teaching »</h3>
</a>
</div>
</li>
<li>
<img src="https://www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147491987/b012b8a1-dbcc-4cbd-b0cb-c1744f7dbe27.jpg?n=3401" alt="Students and tutors in the John Henry Brookes Building">
<div class="slide-text bg-green">
<h2>International students</h2>
<h3>Oxford Brookes is a vibrant, modern university »</h3>
</div>
</li>
</ul>
</article>
<script src="https://www.brookes.ac.uk/FrontendResources/js/responsiveslides.min.js"></script>
<script type="text/javascript">
$(function () {
$(".rslides").responsiveSlides({
auto: true,
nav: true,
speed: 250
});
});
</script>
</div>
For banner image sizes, see images for correct sizes.
For text overlay colours, see text box colours for more information.
If your site is in Ektron please use the Banners or Rotating Banners content module rather than copying and pasting the code.
Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Text box colours
International students
Oxford Brookes is a vibrant, modern university »
International students
Oxford Brookes is a vibrant, modern university »
International students
Oxford Brookes is a vibrant, modern university »
International students
Oxford Brookes is a vibrant, modern university »
International students
Oxford Brookes is a vibrant, modern university »
<div class="slide-text bg-blue">
<h2>International students</h2>
<h3>Oxford Brookes is a vibrant, modern university »</h3>
</div>
<div class="slide-text bg-green">
<h2>International students</h2>
<h3>Oxford Brookes is a vibrant, modern university »</h3>
</div>
<div class="slide-text bg-pink">
<h2>International students</h2>
<h3>Oxford Brookes is a vibrant, modern university »</h3>
</div>
<div class="slide-text bg-purple">
<h2>International students</h2>
<h3>Oxford Brookes is a vibrant, modern university »</h3>
</div>
<div class="slide-text bg-red">
<h2>International students</h2>
<h3>Oxford Brookes is a vibrant, modern university »</h3>
</div>
Background classes available
- .bg-blue
- .bg-green
- .bg-purple
- .bg-pink
- .bg-red
Other background classes available
The use of following text box classes should only be used with caution. (See accessibility tab).
- .bg-pink
- .bg-red
The use of following text box classes has now been deprecated. (See accessibility tab).
- .bg-lime
- .bg-yellow
- .bg-gold
- .bg-aqua
For users with visual impairments, the use of text box classes btn-lime
, btn-yellow
, btn-gold
and btn-aqua
has now been deprecated. These colours should not be used.
The use of text box classes btn-transparent
, btn-pink
and btn-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 |
---|---|---|---|---|
10 Aug 2016 | N/A | 1.0.0 | Needs review | Current |