Drupal CMS: Boxout

Learn to create a boxout in Drupal.

Before you start

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

Instructions

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!

Go to the page where you'd like to use a 'boxout'
Ensure you are in editing mode
Click on the 'boxout' icon in the editing toolbar
You are presented with a box where you choose a thin, thick or no line
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

Web support team (web-support@ucl.ac.uk)
Drupal training and support
Digital Experience website

Feedback

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