Information Services Division


Drupal CMS: Boxout

Learn to create a boxout in Drupal.

Before you start 

When editing use Chrome, Firefox or Safari but NOT Internet Explorer


There are times when you want to make certain elements on your web page stand out. On the right, if you are looking at this page on a desktop computer, otherwise it's at the bottom, you will see an example of such a boxout - it's used to draw your attention to the 'Related guides and more information'.

Don't overdo it on boxouts. Too many of them on a page will have the opposite effect!

  1. Go to the page where you'd like to use a 'boxout'
  2. Ensure you are in editing mode
  3. Click on the 'boxout' icon in the editing toolbar
  4. You are presented with a box where you choose a thin, thick or no line
  5. You can also add an icon which will appear in the top right-hand corner of the box i.e:
  • Envelope: to highlight an email address
  • Link: for links
  • Key: for a box which provides key information
  • Alert: for urgent updates about facilities or systems
  • Register your interest: a more generic icon for highlighting engagement CTAs
  • Tick: to show that a service has resumed or an error has been resolved
  • Information: a generic information icon for general updates

Note that icons like these are not accessible to screen readers (they're part of the visual style assets of the sites) so you should think carefully about the wording of the boxout message heading (H3) and not rely on the icons alone, which are purely visual enhancements for readers scanning a page.

 6. Change the title - you can use a smaller Heading style if so required

 7. Add the text and whatever else you need to add

 9. Save

Help and support


We are continually improving our website. Please provide any feedback using the feedback form.

Please note: This form is only to provide feedback. If you require IT support please contact the IT Services Help desk. We can only respond to UCL email addresses.

Give feedback