Editorial grid modules

Editorial purpose

Use editorial grid modules to enable open-ended browsing and user-led discovery by presenting editorial content in a structured, multi-row layout.

Module variants

• Editorial Grid FullImg Landscape Cards: Displays editorial items as landscape-oriented cards where the image occupies the full card area. See an example of this module in action here: Editorial Grid FullImg Landscape Cards.

• Editorial Grid FullImg Portrait Cards: Displays editorial items as portrait-oriented cards with a full-image layout. See an example of this module in action here: Editorial Grid FullImg Portrait Cards.

• Editorial Grid FullImg Squared Cards: Displays editorial items as square cards with the image filling the entire card. See an example of this module in action here: Editorial Grid FullImg Squared Cardsh.

• Editorial Grid Regular Landscape Cards: Displays editorial items as landscape-oriented cards with a regular (non–full-image) layout. See an example of this module in action here: Editorial Grid Regular Landscape Cards.

• Editorial Grid Regular Portrait Cards: Displays editorial items as portrait-oriented cards using a regular layout. See an example of this module in action here: Editorial Grid Regular Portrait Cards.

• Editorial Grid Regular Squared Cards: Displays editorial items as square cards with a regular layout. See an example of this module in action here: Editorial Grid Regular Squared Cards.

Standard parameters

All modules have the same parameter set — they differ only in visual presentation:

• Visual

  • Full Screen View: Toggle on to enable the full-width view.

  • Hide Module: Toggle on to prevent the module from displaying in the front end.

  • Background Image from GAD: The tag of the GAD asset to display as the background.

  • Color Schema: Specify whether the module appears in light (default value) or dark mode.

  • Remove Top Spacing: Toggle on to remove top spacing from the module.

  • Remove Bottom Spacing: Toggle on to remove bottom spacing from the module.

  • Items Per Row: Items per row. The default value is 3.

• Animation

  • Enable Animation: Toggle on to set module animation. The front-end implementation determines what the animation looks like.

• Title and Call To Action (CTA)

  • Header Title: Set the header title that will be displayed on the FE

  • CTA Title: Title to be used for the CTA

  • CTA Link: Link-out used for the CTA

  • Show CTA Arrow: Toggle on to display the arrow next to the CTA button.

• SEO

  • Header Title Heading Level: Header title heading level to be used on FE. The default value is h2.

  • Hide Header Title in the html: Enable or disable the header title visibility. The title remains in the HTML for SEO.

  • Cards Title Heading Level: Cards title heading level to be used on FE. The default value is h3.

• Sponsor

  • Sponsor Asset: Get a Sponsor entity by slug and retrieve its image and URL to be used as a link

  • Sponsor Label: The label of the sponsor (for example, presented by, sponsored by)

• Data

  • Skip: Number of items to skip.

  • Limit: Number of items to fetch before the load more button, or number of items to be rendered when load more is disabled.

  • Disable Load More: Toggle on to disable the “Load more” functionality.

  • Selection Slug: Slug of the Editorial selection that feeds the grid.

• Alternative Filters

  • Entity Type: Type of entity that feeds the grid. to filter entities. With tags as a filters, it’s an alternative to the editorial selection to feed the grid. If selectionSlug is set, entityType and tags are ignored.

  • Tags: Tags used as filters together with Entity Type. Filtering works in AND mode (i.e., only items with all tags feed the carousel).