1. What is a horizontal content list?

Horizontal content lists are used to display lists of recent events, articles or blog posts on panel pages.

There are two types of horizontal content lists:

  • articles and/or blog posts
  • events.

Use a horizontal content list when:

  • you want to display a teaser list with round images of the 3 most recently published articles, blog posts or upcoming events on a panel page.

Horizontal content lists shouldn't be used when:

  • you want to link to other content types, such as basic or structured pages – consider using a card grid or grid of links.
Top of page

2. How to create a horizontal content list

Horizontal content lists can be created by:

  • site builders.

Use the in-place editor to create a horizontal content list:

  1. Click 'Customize this page' in the black Drupal menu at the bottom of the page, and then click the plus icon (+) in the blue box at the top of the page.
  2. Select 'View panes' from the side menu. You can then filter items in the list by typing 'horizontal' into the 'Quick filter' box.
  3. To add a list of articles or blog posts, select 'View: Horizontal content list: Latest'. To add a list of events, select 'View: Horizontal content list: Latest: Event sessions'.
  4. If you want to filter your list using a taxonomy term, enter a taxonomy term ID in the 'Content: Has taxonomy term ID (with depth)' field.
  5. Select 'Article' or 'Blog post' from the 'Type' drop-down menu. This menu won't appear for events. Hold 'Ctrl' while clicking to select multiple.
  6. Select a sorting option from the 'Sort by' drop-down menu.
  7. Click the 'Finish' button to add the horizontal list to the panel page.
  8. Apply a section style to the panel to finalise the layout.
  9. Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.
Top of page

3. How to edit a horizontal content list

Horizontal content lists can be edited by:

  • site builders
  • site coordinators
  • editors.

To edit a horizontal content list, follow the instructions for editing panels on panel pages.

Top of page

4. Best practice

  • Use taxonomy terms to group articles and events into related categories. You can then use the taxonomy term ID to control which items appear in your horizontal content lists.
  • Display a maximum of 3 items in your list.
Top of page

6. Fields

Complete as many optional fields as possible to provide the best user experience.

Articles and blog posts

Field name

Required field?

Function

Content: Has taxonomy term ID (with depth)

No

Filters articles or blog posts using a specified taxonomy term ID.

Num items

No

Determines the number of items that will appear in your list. Default option is 3, which is the recommended number to balance the display.

Offset

No

Skips a defined number of items before selecting the first article or blog post that will be displayed in the list. Used when listing the first item in a different component above to avoid listing twice. Default option is 0.

Type

No

Determines the type of content that will be displayed.

Sort by

No

Displays articles or blog posts by publication date, post date, or alphabetically by title.

Order

No

Displays articles or blog posts in ascending or descending order.

Events

Field name

Required field?

Function

Content: Has taxonomy term ID (with depth)

No

Filters events using a specified taxonomy term ID.

Num items

No

Determines the number of events that will appear in your list. Default option is 3.

Offset

No

Skips a defined number of events before selecting the first event that will be displayed in the list. Default option is 0.

Sort by

No

Displays events according to start date or title.

Order

No

Displays events in ascending or descending order.

Top of page