Basic page

You can use several components to build your basic pages. These include text, media, and link lists.

Text component

Use the text component to add text to your page. You can format this text to include:

  • bulleted lists
  • numbered lists
  • links
  • headings
  • document downloads

Read text component guidance on our IT Help and Support site.

Bulleted lists

Use a bulleted list:

  • to break up long chunks of text
  • to make content easier to read
  • for lists where the order of the items does not matter

Read more about bulleted lists in our style guide.

Numbered lists

Use a numbered list to show the steps in a process or the order of a series of events.

Example numbered list

  1. Go to example-website.com.
  2. Enter your email address and password.
  3. Complete the application form.
  4. Make the payment.
  5. Submit your application.

Read more about numbered lists in our style guide.

Links

Use links to take people to pages they may need to visit next.

If you use a link, the link text must describe where the user will go or what will happen when they select the link. Do not use “click here” or “read more” as link text for this reason.

Read more about links in our content standards on our Content Community site.

Headings

Use clear, concise headings to structure your page.

Use Heading 2 (H2) for subheadings. If you need to add sections under an H2 subheading, use Heading 3, and so on.

Read more about headings in our content standards on our Content Community site.

Document downloads

Insert a document that your users can download.

In many cases, web pages provide a better experience than documents. Only use a document download if you cannot offer the content on a web page.

You can also choose to upload your document as a protected document. Users will not see protected documents on the page unless they are signed into their University account.

Example document download

Example protected document download

If you cannot see the protected document download link, you'll need to sign into your University account.

Read about file naming conventions on our Content Community site.

Read about PDFs on websites on our Content Community site.

 

Accordion component

Use the accordion component to add an accordion to your page.

An accordion can be useful if a user needs to reveal and compare information that's relevant to them. But they hide content, so do not use them for content all users need to see.

Only use an accordion:

  • to show an overview of multiple, related sections of content
  • so users can show and hide sections that are relevant to them
  • if users only need a few pieces of information on the page

 

Example accordion - lecture capture

You can add an optional description to your accordion if needed.

You can watch recordings of your lectures if your Department has chosen to provide these as part of your course. You'll be able to access them from the Panopto block on the right-hand side of the screen in Moodle.

Learn more about:

To get started with lecture capture, read our guidance on:

Find out more about:

 

Read accordion component guidance on our IT Help and Support site.

Learn about accordions on GOV.UK's design system.

 

Media component

Use the media component to add an image to your page.

You can choose how your image displays on the page. You can use:

  • 16:9 - full width
  • 1:1 - small square

On mobile, both display options will fill the width of the screen.

Use this component only if there is a real user need. You can add an image to help users understand information in a different way. Do not add images to “liven the page up”.

If your image conveys information, add alt text.

Read media component guidance on our IT Help and Support site.

Learn about image copyright on our Content Community site.

 

You can add an optional caption to your image if needed.