When to use the Text and image block component
Use a Text and image block to add a section of text to a Campaign page.
Using a Text and image block helps you structure your content clearly and accessibly for users by adding a title and summary to introduce your text.
You can also add:
- an appropriate image
- a Tagline
- a Related content button
Creating accessible content
You must make sure your content is accessible.
As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).
Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.
Finding the Text and image block component
You can add up to six Text and image blocks to a Campaign page.
To find the component in the Campaign template:
- Open the drop-down menu under 'Drag and drop components'.
- Select 'Text and image block'.
- Click 'Add component'.
The Text and image block will appear beneath 'Component(s) currently in use'.
Adding content to the Text and image block component
You must add a title, a summary, and a body of text to each Text and image block. You can also add an image, a tagline, and a related content button.
Check the Campaign template for the character limit in each of these fields. Typecase includes Markdown, spaces, and line breaks when counting characters.
You can type directly into the text fields or copy and paste text from somewhere else, like a Word document.
Adding a title and summary
Use the Title field to add a heading for the section. This should clearly describe what the section is about.
Typecase formats text in the Title field as h1 so, if you add a subheading to the Text block text field (using Markdown) it must be h2.
In the Summary field, give some additional context for the information to help users decide if this section is relevant to them.
These are required fields, so you need to add a title and summary before you can save or publish your page. You cannot use Markdown in these fields.
Adding an image
You can choose to add an image to a Text and image block. Make sure the image is relevant and adds value to the content in the section.
The image should be 1280 x 720 pixels or larger, in a 16:9 ratio.
To add an image:
- Paste the image URL in the 'Image web address (URL)' field.
- Write a description of the image in the 'Alternative image text (alt text)' field to describe the image to people who can't see it.
Adding the main body of text
In the Text block field, add the main body of text for the section.
Use Markdown to format your text if necessary, for example, to add subheadings, bullet points, or links.
This is a required field, so you need to add text here before you can save or publish your page.
Adding a tagline
You can add text to the Tagline field to promote or highlight a short piece of information. This will display as larger text within the main text block.
This is an optional field, so you don't need to include anything here before you can save or publish your page.
Linking to related content
You can add a Related content button to the bottom of a Text and image block to link users to a relevant web page.
To do this:
- Add some short link text, describing what users want to do next, to the Related content button text field.
- Add the URL of the destination page to the Related content button web address (URL) field.
You do not need to use a full stop on a Related content button.
These are optional fields, so you don't need to include anything here before you can save or publish your page.
Things to avoid
Don't put all your text into one Text and image block.
Instead, use more than one block to separate your text into different sections with appropriate headings. This gives your content a clear structure, making it more accessible and easier for people to find the information they need.
Moving your content around the page
You can drag and drop the Text and image block to move it to a different position on the page.
Click 'Collapse this section' to minimise a Text and image block while you work on other areas of the page. The content will still appear on the preview and published pages if you collapse part of the template.