Home ▻ T4 Training▻Training▻Training Examples▻Image Roundel with Description

Image Roundel with Description

The Image Roundel with Description is a standard page image component that is designed to compliment a content (rich text) paragraph of text.  The image should, ideally, be simple and colourful, with a central focus...

Sample Image Roundel with Description

Dog sitting by an open fire, facing the camera
Charlie by the fire

The Accordion content type below uses a Heading 4 (H4), so I am adding a Heading 3 (H3) here to meet  Accessibility compliance.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius egestas quam a tempus. Quisque non est auctor, placerat risus id, pretium ex. Fusce molestie sollicitudin ante, ut varius leo laoreet bibendum. Suspendisse potenti. Cras risus diam, dignissim eu sem in, ullamcorper aliquet dolor. Aenean id laoreet nulla, facilisis porttitor sem. In nec vulputate nunc. Phasellus eu ultrices neque. Duis in cursus dolor, vel vehicula nibh. Pellentesque justo nibh, gravida pretium libero ac, tincidunt gravida libero.

How do I create an Image Roundel with Description?

  1. Go to the section where you want to place the Image Roundel with Description content type, 
    • This content type will not appear on widescreen pages (college/school/top level landing pages)
  2. Click on Add Content
  3. Choose the Image Roundel with Description content type
  4. Fill in the details
    1. Provide a name
    2. Provide a Header (optional)
    3. Provide the Body Text - this will appear on the left or right of your Roundel image. (If you need to insert a H3, to meet Accessibility requirements, place it at the top of this text.)
    4. Click on the Image field to choose an image from your computer.  Images should be 400 x 400px (for retina displays), and no less than 200 x 200px
    5. Add a Description for your image. 
  5. Click on Save changes to put your content on Pending
    Save Changes button
  6. Click on Save and approve to Approve your content
    Save Changes dropdown with Save and Approve highlighted

Accessibility considerations

The Image Roundel with Description content type has a H2 heading.  You need to be mindful of the other content types you use above or below this content type to ensure your headings are hierarchal (Accessibility requirement).

To check your headlines, go to our bookmarklet page and drag the Show Headlines into your Bookmark bar. Click on the Show Headlines to see the hierarchy of headings on your webpage.