Toggle navigation

Components

Mixing box links and box objects

There are times when you need to mix rows of content blocks of box links and box objects.

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

Two boxes

<div class="row flex-row">
    <div class="col-xs-12 col-sm-12 col-md-6">
        <a href="/your-link-here/" class="flex-item box-link bg-charcoal fg-white padding10">
            <h2>Preparation and arrival</h2>
            <p>Practical advice including applying for your visa and what to pack.</p>
        </a>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6">
        <div class="flex-item box-object bg-purple fg-white padding10">
            <h2>Your study options</h2>
            <ul>
                <li><a href="/your-link-here/">English language, foundation and pre-master's courses</a></li>
                <li><a href="/your-link-here/">Undergraduate courses</a></li>
                <li><a href="/your-link-here/">Postgraduate courses</a></li>
                <li><a href="/your-link-here/">Study Abroad and Exchanges</a></li>
            </ul>
        </div>
    </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-blue
  • bg-charcoal
  • bg-darkgrey
  • bg-green
  • bg-pink
  • bg-purple
  • bg-black
  • bg-red

Use fg-black or fg-darkgrey with the following background colour:

  • bg-lightgrey

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/

Top of page

Three boxes

<div class="row flex-row">
    <div class="col-xs-12 col-sm-12 col-md-4">
        <a href="/your-link-here/" class="flex-item box-link bg-green fg-white padding10">
            <h2>Consultancy</h2>
            <p>Staff development in pedagogic, personal, and leadership development</p>
        </a>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
        <a href="/your-link-here/" class="flex-item box-link bg-green fg-white padding10">
            <h2>Courses</h2>
            <p>Personal development, leadership, management, learning, teaching</p>
        </a>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
        <div class="flex-item box-object bg-charcoal fg-white padding10">
            <h2>Your development</h2>
            <p>What are you interested in?</p>
            <ul>
                <li><a href="/your-link-here/">Developing support staff</a></li>
                <li><a href="/your-link-here/">Teaching and learning development</a></li>
                <li><a href="/your-link-here/">Academic advising</a></li>
            </ul>
            <p><a href="/your-link-here/">Find out more »</a></p>
        </div>
    </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-blue
  • bg-charcoal
  • bg-darkgrey
  • bg-green
  • bg-pink
  • bg-purple
  • bg-black
  • bg-red

Use fg-black or fg-darkgrey with the following background colour:

  • bg-lightgrey

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/

Top of page

Boxes stacked right

<div class="row flex-row">
    <div class="col-xs-12 col-sm-12 col-md-8">
        <div class="flex-item box-object bg-blue fg-white padding10">
            <h2>Your study options</h2>
            <ul>
                <li><a href="/your-link-here/">English language, foundation and pre-master's courses</a></li>
                <li><a href="/your-link-here/">Undergraduate courses</a></li>
                <li><a href="/your-link-here/">Postgraduate courses</a></li>
                <li><a href="/your-link-here/">Study Abroad and Exchanges</a></li>
            </ul>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <a href="/your-link-here/" class="flex-item box-link bg-charcoal fg-white padding10">
                    <h2>English language support</h2>
                    <p>Free English language support to help you succeed in your studies.</p>
                </a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <a href="/your-link-here/" class="flex-item box-link bg-charcoal fg-white padding10">
                    <h2>Preparation and arrival</h2>
                    <p>Practical advice including applying for your visa and what to pack.</p>
                </a>
            </div>
        </div>
    </div>
</div>

Example with one box object and two box links stacked to the right

Content in stacked boxes must be taller on desktop/large devices or box object content will not be an equal height.

To vertically equalise the heights, use flex-row along with the row class and flex-item class on the link.

Background classes available

Only use with fg-white, except when using bg-lightgrey when you can use fg-black or fg-darkgrey.

  • bg-blue
  • bg-charcoal
  • bg-darkgrey
  • bg-green
  • bg-purple
  • bg-black
  • bg-pink
  • bg-red
  • bg-lightgrey - use with fg-black or fg-darkgrey

Other background classes available

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

  • bg-pink
  • bg-red

The use of following text box classes has now been deprecated.

  • bg-lime
  • bg-yellow
  • bg-gold
  • bg-aqua

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/

Top of page

Boxes stacked left

<div class="row flex-row">
    <div class="col-xs-12 col-sm-12 col-md-3">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <a href="/your-link-here/" class="bg-darkgrey fg-white padding10 box-link">
                    <h2>Consultancy</h2>
                    <p>Staff development in pedagogic, personal, and leadership development</p>
                </a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <a href="/your-link-here/" class="bg-darkgrey fg-white padding10 box-link">
                    <h2>Courses</h2>
                    <p>Personal development, leadership, management, learning, teaching</p>
                </a>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <a href="/your-link-here/" class="bg-darkgrey fg-white padding10 box-link">
                    <h2>Publications</h2>
                    <p>Free and paid books and ebooks on educational development </p>
                </a>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-9">
        <div class="flex-item box-object bg-lightgrey fg-darkgrey padding10">
            <h2>Your development</h2>
            <p>What are you interested in?</p>
            <ul>
                <li><a href="/your-link-here/">Developing support staff</a></li>
                <li><a href="/your-link-here/">Teaching and learning development</a></li>
                <li><a href="/your-link-here/">Academic advising</a></li>
                <li><a href="/your-link-here/">Leadership and management</a></li>
                <li><a href="/your-link-here/">Project management</a></li>
                <li><a href="/your-link-here/">Career and personal development</a></li>
                <li><a href="/your-link-here/">Work-based qualifications</a></li>
                <li><a href="/your-link-here/">Mandatory courses for staff at Oxford Brookes</a></li>
                <li><a href="/your-link-here/">Brookes Teaching Excellence Fellowships</a></li>
            </ul>
            <p><a href="/your-link-here/">Find out more »</a></p>
        </div>
    </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-blue
  • bg-charcoal
  • bg-darkgrey
  • bg-green
  • bg-pink
  • bg-purple
  • bg-black
  • bg-red

Use fg-black or fg-darkgrey with the following background colour:

  • bg-lightgrey

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/

Top of page

Changelog

Added Updates Current version Accessibility Status
14 December 2016 N/A 1.0.0 Needs review Current

Top of page