Toggle navigation

Components

Striped boxes

Striped boxes are usually full width striped with aligned buttons and background images. 50% split boxes can also be used.

Right aligned buttons

Facilities

<style>
.bg-image.change-this-to-something-unique-a {
    background-image: url('//www.brookes.ac.uk/assets/0/1425/1426/2147486262/1387d906-29f5-4ac2-96d2-366254ac6c68.jpg');
    min-height: 340px;
    margin-top: 0;
}
</style>
<h2 class="visible-xs-block lg-title hblack text-uppercase fg-pink">Facilities</h2>
<div class="text-right box-feature bg-image change-this-to-something-unique-a padding20">
    <h2 class="hidden-xs md-title hblack text-uppercase fg-pink">Facilities</h2>
    <div class="row">
        <div class="col-xs-12 col-md-6 col-md-offset-6">
            <ul class="list-unstyled">
                <li><a class="btn btn-pink" href="/brookes-sport-new/facilities/gym/" title="Gym">Gym »</a></li>
                <li><a class="btn btn-pink" href="/brookes-sport-new/facilities/climbing/" title="Climbing">Climbing »</a></li>
                <li><a class="btn btn-pink" href="/brookes-sport-new/facilities/swimming/" title="Swimming">Swimming »</a></li>
                <li><a class="btn btn-pink" href="/brookes-sport-new/facilities/courts-pitches-and-sports-hall/" title="Courts and sports hall">Courts, pitches and sports hall »</a></li>
                <li><a class="btn btn-pink" href="/brookes-sport-new/facilities/walking-and-running-routes/" title="Walking and running routes">Walking and running routes »</a></li>
            </ul>
        </div>
    </div>
</div>
  • CSS for the image will need to be added to the content block.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Left aligned buttons

Performance Sport

<style>
.bg-image.change-this-to-something-unique-b {
    background-image: url('//www.brookes.ac.uk/assets/0/1425/1426/2147486262/232a17d3-b10f-4f87-ba14-3c7623d10da5.jpg');
    height: 400px;
}
</style>              
<h2 class="visible-xs-block lg-title hblack fg-charcoal">Performance Sport</h2>
<div class="box-feature bg-image change-this-to-something-unique-b padding20">
    <h2 class="hidden-xs lg-title hblack fg-charcoal">Performance and Representing Brookes</h2>
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <ul class="list-unstyled">
                <li><a class="btn btn-charcoal georgia bg-image-desc text-right" href="/brookes-sport-new/performance-and-representing-brookes/" title="Performance and Representing Brookes">Performance and Representing Brookes intro copy, lorem ipsum dolor. Find out more »</a></li>
                <li><a class="btn btn-charcoal" href="/brookes-sport-new/performance-sport/clubs-and-teams/" title="Clubs and teams">Clubs and teams »</a></li>
                <li><a class="btn btn-charcoal" href="/brookes-sport-new/performance-sport/scholarships-and-tass/" title="Scholarships and TASS">Scholarships and TASS »</a></li>
                <li><a class="btn btn-charcoal" href="/brookes-sport-new/performance-sport/supporting-performance/" title="Supporting performance">Supporting performance »</a></li>
            </ul>
        </div>
    </div>
</div>

This example also has a description button using Georgia, 50% wide on desktop size and left aligned buttons.

  • CSS for the image will need to be added to the content block.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Right aligned description button

Career progression

<style>
.bg-image.change-this-to-something-unique-cp {
    background-image: url('//www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147491987/a27817107af14e5f9a2e2400f45a9257.jpg');
    background-position: top center;
    height: 400px;
}
</style>
<h2 class="visible-xs-block lg-title hblack text-uppercase fg-green">Career progression</h2>
<div class="text-right box-feature bg-image change-this-to-something-unique-cp padding20">
    <h2 class="hidden-xs lg-title hblack text-uppercase fg-green">Career progression</h2>
    <div class="row">
        <div class="col-xs-12 col-md-6 col-md-offset-6">
            <ul class="list-unstyled">
                <li>
                    <a class="btn btn-green georgia bg-image-desc text-right" href="/studying-at-brookes/courses/postgraduate/career-progression/" title="Career progression">
                        <p><strong><em>Our postgraduate opportunities will help you take charge of your career by building on your undergraduate degree and developing your professional skills.</em></strong></p>
                        <p><strong><em>Find out more »</em></strong></p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

This example has just a description button using Georgia, 50% wide on desktop size.

  • CSS for the image will need to be added to the content block.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Left aligned description button

Academic excellence

<style>
.bg-image.change-this-to-something-unique-ae {
    background-image: url('//www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147491987/455461632da34c269e0799e093dd5522.jpg');
    background-position: top center;
    height: 400px;
}
</style>
<h2 class="visible-xs-block lg-title hblack text-uppercase fg-blue">Academic excellence</h2>
<div class="box-feature bg-image change-this-to-something-unique-ae padding20">
    <h2 class="hidden-xs lg-title hblack text-uppercase fg-blue">Academic excellence</h2>
    <div class="row">
        <div class="col-xs-12 col-md-6">
            <ul class="list-unstyled">
                <li>
                    <a class="btn btn-blue georgia bg-image-desc" href="/studying-at-brookes/courses/postgraduate/academic-excellence/" title="Academic excellence">
                        <p><strong><em>Our research has global, national and local impact and our academics are passionate and enthusiastic about their subjects, which makes Brookes the perfect place for your postgraduate studies.</em></strong></p>
                        <p><strong><em>Find out more »</em></strong></p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

This example has just a description button using Georgia, 50% wide on desktop size.

  • CSS for the image will need to be added to the content block.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

In-line buttons

Services

Working together to enhance the learning, emotional, physical and spiritual life of the Oxford Brookes community

<style>
.bg-image.change-this-to-something-unique-z {
    background-image: url('//www.brookes.ac.uk/assets/0/1425/1426/2147485178/2147488320/7dea622db03a434b9189046cb1d3fc6d.png');
    height: 400px;
}
</style>
<h2 class="visible-xs-block lg-title hblack text-uppercase fg-charcoal">Services</h2>
<div class="box-feature bg-image change-this-to-something-unique-z padding20">
    <h2 class="hidden-xs md-title hblack text-uppercase fg-white">Services</h2>
    <div class="row">
        <div class="col-xs-12 col-md-7">
            <h3 class="fg-white">Working together to enhance the learning, emotional, physical and spiritual life of the Oxford Brookes community</h3>
            <ul class="list-inline">
                <li><a class="btn btn-default" href="#">Counselling »</a></li><li><a class="btn btn-default" href="#">Disability »</a></li><li><a class="btn btn-default" href="#">Dyslexia / SpLD »</a></li><li><a class="btn btn-default" href="#">Chaplaincy »</a></li><li><a class="btn btn-default" href="#">Mature students »</a></li><li><a class="btn btn-default" href="#">Care leavers »</a></li>
            </ul>
        </div>
    </div>
</div>

This example also has a block of text before the in-line buttons.

  • CSS for the image will need to be added to the content block.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

2 background image blocks in a row

<style>
.bg-image.change-this-to-something-unique-d {
    background: url('http://www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147486921/2147493479/34fe2d1e-d344-4040-a41e-1a75fc8013c0.jpg') bottom no-repeat;
    background-size: cover;
    height: 200px;
}
.bg-image.change-this-to-something-unique-e {
    background: url('http://www.brookes.ac.uk/assets/0/1425/1426/2147484555/2147486921/2147493479/cc155513-c9ea-43e4-9229-06728f680d59.jpg') center no-repeat;
    background-size: cover;
    height: 200px;
}
</style>
<div class="row">
    <div class="col-xs-12 col-md-6 col-lg-6">
        <div class="box-feature bg-image change-this-to-something-unique-d padding20">
            <ul class="list-unstyled">
                <li><a class="btn btn-charcoal" href="#">Current students »</a></li>
            </ul>
        </div>
    </div>
    <div class="col-xs-12 col-md-6 col-lg-6">
        <div class="box-feature bg-image change-this-to-something-unique-e padding20">
            <ul class="list-unstyled">
                <li><a class="btn btn-charcoal" href="#">Partnership staff »</a></li>
            </ul>
        </div>
    </div>
</div>

This example has two background image blocks in a row.

  • CSS for the image will need to be added to the content block.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Changelog

Added Updates Current version Accessibility Status
10 August 2016 N/A 1.0.0 Needs review Current

Top of page