List 4 – Image w/List

List 4 – Image w/List

Description

This section has a headline, short text, an image, a list headline and a link list. Choose left or right alignment.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Headline*

  • Character Limit: Recommended limit of 90 characters including spaces.
  • Help Text: Enter the headline text. There is a recommended limit of 90 characters including spaces. This field renders as an <h2>. See Headers for guidelines and best practices for headlines and sub-headlines.

Short Text

  • Character limits: Recommended limit of 350 characters including spaces.
  • Help Text: Enter the short text. There is a recommended limit of 350 characters including spaces.

Image*

  • Limits: 2MB, 768 x 768 pixels, png jpg jpeg.
  • Help Text: Move white plus icon to select your preferred focal point for automatic image cropping. See Images for guidance and best practices.
    • One file only
    • 2mb limit
    • Allowed types: png, jpg, jpeg
    • Images must be larger than 768x768px

Alternative text*

  • Help text: See Alternative Text for info about writing effective alternative text.

Link URL*

  • Help text: Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only.

Link text*

  • Character limits: Recommended limit of 55 characters including spaces.
  • Help Text: Enter the headline text. There is a recommended limit of 55 characters including spaces. Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Available Style Options

  • None

Where Can You Use This Section?

The section is available in the following templates and content types:

Templates

  • List

Content types

  • Content Page

Using on a cloneable List Template

  1. Locate List 4 –Image w/List in the Body section
  2. Select Edit
  3. Replace the placeholder Headline and Short Text
  4. Select Remove to remove the placeholder image
  5. Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
  6. Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotSet the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
  7. Enter the Alternative text
  8. Select Edit to expand the List
  9. In the List section modify the List Headline field
  10. For each Link, replace the placeholderURL and Link text for each list item
  11. Clear the URL and Link text contents for each list item you'd like to remove
  12. Select the Style Options tab, select Text Orientation
    View ScreenshotSelect the Style Options tab, select Text Orientation
  13. Select Save at the bottom left of the form

Adding to a new Content Page

  1. In the Body area, select Add Body Section
  2. Select List 4 –Image w/List, select Add
    View ScreenshotSelect List 4 –Image w/List, select Add
  3. Add the Headline and Short Text fields
  4. Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
  5. Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotSet the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
  6. In the List section add the List Headline field
  7. For each Link, add the URL and Link text for list item you’d like to add
  8. Select the Style Options tab, select Text Orientation
    View ScreenshotSelect the Style Options tab, select Text Orientation
  9. Select either Save as Draft or Published with the drop-down menu
  10. Select Save at the bottom left of the form

Accessibility

  • Alternative text is required for all images. See Alternative Text for info about writing effective alternative text.
  • Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Guidelines and Best Practices

  • Link lists have a maximum of eight list items
  • If you use more than five links the link list can exceed the height of the image. When possible limit lists to five items or less.

Removing a Section

To permanently remove a section from a page:

  1. Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
    View ScreenshotSelect the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
  2. Select Save at the bottom left of the form