How to add modules

When to use modules

Modules are styled containers for content, they can be used within a homepage grid, right hand column or within body area of a page.

When using a right column, content will almost always be within modules.

You can use modules to:

  • highlight and link to single pages of related content;
  • create a list menu linking to several related pages
  • highlight facts, blockquotes or profiles
  • highlight important messages or alerts
  • link to social media accounts

A module is usually made up of a heading, an image, short paragraph (20-30 words), blockquote or unordered list. Where possible, the heading should be made into a link to the relevant page.

Types of modules

Basic module

Use <div class="module"> to create a basic module.

Basic module heading

Module paragraph text with an inline link to same page that module heading and image link to.

Basic module without image

Module paragraph text with an inline link to same page that module heading and image link to.

Module box

Use <div class="module module-box"> to create a module box. This will add the stone-coloured background from the University's core colour palette.

Module box heading

Get a taste of the accommodation on offer for undergraduates - from modern catered halls to shared Georgian townhouses.

Module box without image

Get a taste of the accommodation on offer for undergraduates - from modern catered halls to shared Georgian townhouses.

Coloured module box

Use <div class="module module-box module-b-blue"> to replace the stone background with one of the 16 colours from the University’s supporting colour palette - in this case bright blue.

Coloured module box heading

Get a taste of the accommodation on offer for undergraduates - from modern catered halls to shared Georgian townhouses.

Coloured module box without image

Get a taste of the accommodation on offer for undergraduates - from modern catered halls to shared Georgian townhouses.

The 16 colour classes are:

Dark colours

  • module-box-d-aqua
  • module-box-d-blue
  • module-box-d-purple
  • module-box-d-pink
  • module-box-d-red
  • module-box-d-yellow
  • module-box-d-lime
  • module-box-d-green

Bright colours

  • module-box-b-aqua
  • module-box-b-blue
  • module-box-b-purple
  • module-box-b-pink
  • module-box-b-red
  • module-box-b-yellow
  • module-box-b-lime
  • module-box-b-green

Use the coloured module boxes sparingly - the more colour and styling you apply to the page, the more distracting it is for your reader. Stick to the colours within your website’s colour scheme in accordance with the University visual identity guidelines.

Tinted module box (bright colours only)

Use <div class="module module-box module-tint-b-purple"> to replace the stone background with one of the eight tinted colours from the University’s supporting colour palette - in this case tinted bright purple. Note, only bright colours have a tinted version.

Tinted module box heading

Get a taste of the accommodation on offer for undergraduates - from modern catered halls to shared Georgian townhouses.

The eight tinted colour classes are:

  • module-box-tint-b-aqua
  • module-box-tint-b-blue
  • module-box-tint-b-purple
  • module-box-tint-b-pink
  • module-box-tint-b-red
  • module-box-tint-b-yellow
  • module-box-tint-b-lime
  • module-box-tint-b-green

Nested module box

You can pair two partner-coloured modules by nesting one within the other. The two colours must be partners from the supporting palette, in this case dark pink and bright pink.

REF 2014 results

  • xx% of research is world-leading
  • xx% of research is internationally excellent
  • xx% of research is recognised internationally
  • xx% of research is recognised nationally

Results are from the most recent Research Excellence Framework 2014, conducted by HEFCE.

Alerts and important messages

Use <div class="module module-message icon-info"> for important messages and alerts.

This type of module can be used across the full width of the page or within a column grid_8.

This is an important message

This is an important heading

This is an important message

You can also use module-message with one of the eight tinted colour classes. Note, only bright colours have a tinted version.

This is an important heading with a tinted bright yellow background

This is an important message with a tinted bright yellow background

Social media modules

A module box for highlighting a Facebook or Twitter account. These are used with one of the eight tinted colour classes - change the module-box-tint-b-red class to suit your colour scheme.

Follow on Facebook

Follow us on Facebook for the latest news and events.

Follow on Twitter

Follow us on Twitter for the latest news and events.

Images within modules

Modules usually have an image. When used, the image is wrapped within the heading tags, after the heading text.

There are two images sizes:

  • 283px × 142px
  • 283px × 94px

Use 283px × 142px for the first module image in a right hand column. If further modules are used in the right column, images should usually be 283px × 94px.

See how to prepare images for use on web pages.

If you want a module with just a linked heading and image, use <div class="module module-box module-box-d-green module-just-image">

After inserting images, you may find a gap beneath each image when previewing the page. To remove the gap, open the page in HTML view and remove any instances of &zwnj; or &zwnj;<br /> from the code. Note: the <br /> may sometimes be on the line below the &zwnj; but you will still need to remove it. This is a known issue, for more details see How to fix known issues.

Text within modules

Keep paragraphs in modules short and succinct - 20-30 words is usually enough. Do not use a 'Find out more' type link at the end of the text, instead link relevant words/phrases within the paragraph.

Basic module heading

Module paragraph text with an inline link to same page that module heading and image link to, and a link to another page.

List menus within modules

To create a list menu of links use:

  • <ul class="list-no-style list-links list-links-no-margin"> for modules with images
  • <ul class="list-no-style list-links"> for modules without images

Modules without headings

Modules can be used without headings. Useful for a fact, blockquote or profile.

To create the example with the circular thumbnail image, the image must be 142px x 142px. Insert the image to the left of the first word in the paragraph, then right-click the image and select 'Edit Media Attributes' and in the 'class' field add img-circle img-circle-right.

The city centre has been designated a centre of culture and a science city by the government.

Bristol is such a good city for students; whether you want culture, good nightlife, shopping, green space or fine dining, Bristol has it all. The university is world-renowned, and to study here is such a privilege.

Zoe, Second Year, MB ChB Medicine

The sports facilities at Bristol are extensive, and you can play pretty much any sport you can think of. There are loads of things to try, and you might enjoy doing something you never thought you’d do.

Oliver, Second year, MSci Chemistry

Note: for the quote module with circular image, paste the above code into the HTML view. Then in the WYSIWYG view, select the placeholder image and insert your own image (which needs to be 142px x 142px). Right-click the image and select 'Edit Media Attributes' and in the 'class' field add img-circle img-circle-right.

Modules within body text

Modules are mostly used in the right-hand column, but you can add use them in the main body text by adding align-right to the class.

One of the most dynamic and cosmopolitan centres outside London.

Named Source

When you choose a university, you're also choosing the place that will be your new home, so it's worth getting it right.

Our students always say how much they love the city of Bristol - from its friendly people and fantastic music scene to its vibrant Harbourside, green spaces and buzzing centre.

Bristol is a thousand years old but right at the cutting edge. It is dynamic yet laid-back, culturally rich but down to earth.

Best of all, Bristol is the perfect size, offering all the excitement of a big city packed into an area you can easily explore.

After inserting images, you may find a gap beneath each image when previewing the page. To remove the gap, open the page in HTML view and remove any instances of &zwnj; or &zwnj;<br /> from the code. Note: the <br /> may sometimes be on the line below the &zwnj; but you will still need to remove it. This is a known issue, for more details see How to fix known issues.