List 7 – Thumbnail List

Description

This section has a list of thumbnail cards with a headline, thumbnail image, card headline, card text and an optional link.

*required fields

Headline

Character limit: Recommended limit of 40 characters including spaces.
Help text: Enter the headline text. There is a recommended limit of 40 characters including spaces. This field renders as an <h2>. See Headers for guidelines and best practices for headlines and sub-headlines. This will be the headline text for the entire section and will appear at the top of all thumbnails.

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
- 2 MB limit
- Allowed types: png, jpg, jpeg
- Images must be larger than 768x768px
- This is the thumbnail that will appear to the left of the card text. This image will be resized to 100 pixels x 100 pixels

Alternative text*

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

List Headline

Character limit: Recommended limit of 18 characters including spaces.
Help text: Enter the list headline. It will appear at the top of the thumbnail item. Recommended limit of 18 characters including spaces.

List Short Text

Character limit: Recommended limit of 75 characters including spaces.
Help text: Enter the short text. It will appear to the right of the thumbnail image. Recommended limit of 75 characters including spaces.

Link URL

Help text: 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 40 characters including spaces.
Help text: Enter the link text. There is a recommended limit of 40 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.

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

Templates

Content types

Locate List 7 –Thumbnail List in the Body section
Select Edit
Replace the placeholderHeadline
Select the Edit all
Select Remove to remove the placeholder image
Select the Browse button to upload an image, or select the Open File Browser link to view previously uploaded images
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
Add the Alternative text
Replace the placeholderList Headline, List Short Text, URL and Link text
To remove Thumbnail List Items, select the ellipses on the right edge of the row and select Remove
View ScreenshotTo remove Thumbnail List Items, select the ellipses on the right edge of the row and select Remove
To add links, select the Add Thumbnail List Item button
View ScreenshotTo add links, select the Add Thumbnail List Item button
Select Save at the bottom left of the form

In the Body area, select Add Body Section
Select List 7 –Thumbnail List, select Add
View ScreenshotSelect List 7 –Thumbnail List, select Add
Enter the Headline
Under Thumbnails List, select the Browse button to upload an image, or select the Open File Browser link to view previously uploaded images
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
Add the Alternative text, Card Headline Text, Card Text and Link fields
<
To add links, select the Add Thumbnail List Item button
View ScreenshotTo add links, select the Add Thumbnail List Item button
Select either Save as Draft or Published with the drop-down menu
Select Save at the bottom left of the form

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.

Length of List Text area determines location of the link. Be aware of the length of text and relative position of the link on the page.
Use drag order to reorder and determine which entry has which display style

To permanently remove a section from a page:

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
Select Save at the bottom left of the form