Guides

List

Displays a collection of mixed content types in a responsive grid with click-through navigation.

A widget that displays a collection of different content types.

<div
	data-component="fu-widget"
	data-content-type="list"
	data-content-id="your-list-id"
	data-classic-quiz-url="/quiz/{CONTENT_ID}/custom-path"
	data-personality-quiz-url="/personality-quiz/{CONTENT_ID}/custom-path"
	data-either-or-url="/either-or/{CONTENT_ID}/custom-path"
	data-poll-url="/poll/{CONTENT_ID}/custom-path"
	data-match-quiz-url="/match-quiz/{CONTENT_ID}/custom-path"
	data-items-count="10"
	data-items-per-row="2"
	data-widget-mode="LOAD_MORE"
></div>

Configuration Attributes

AttributeDescriptionOptions/FormatDefault
data-classic-quiz-urlCustom URL pattern for quiz contentURL with {CONTENT_ID} placeholderGlobal config
data-personality-quiz-urlCustom URL pattern for personality quiz contentURL with {CONTENT_ID} placeholderGlobal config
data-either-or-urlCustom URL pattern for either/or gamesURL with {CONTENT_ID} placeholderGlobal config
data-poll-urlCustom URL pattern for pollsURL with {CONTENT_ID} placeholderGlobal config
data-match-quiz-urlCustom URL pattern for match quiz gamesURL with {CONTENT_ID} placeholderGlobal config
data-items-countNumber of items to displayPositive integer10
data-items-per-rowItems per row in grid layoutPositive integer2
data-widget-modeList display mode"LOAD_MORE", "LIMITED""LOAD_MORE"

URL Configuration

You can specify URL patterns for each content type in the list widget either through global configuration (in the initialization) or through HTML attributes. These URL patterns should include {CONTENT_ID}, which will be replaced with the actual content ID when generating links. HTML attributes override the global URL configuration.

📘

See Features → URL Configuration for the global urls settings.

Widget Modes

  • LOAD_MORE: Shows items with a "Load More" button to fetch additional content
  • LIMITED: Shows exactly the specified number of items without load more functionality

Features

  • Mixed content display of different widget types
  • Responsive grid layout
  • Click-through navigation to individual content items
  • Dynamic loading
  • Support for all widget content types