Listed Resources

List of contained content for resources such as blog posts, events, courses, etc., with multiple different style options.

Example 1

listed-resources


Example 2

listed-resources-2

Example 3

listed-resources-3

Example 4 & 5

listed-resources-4listed-resources-5

View a live demo of this module.

The following is a detailed listing of all the Content and Style fields available in this module.

Content

  • Style [Choice] [ Required]
    Select how the items should be displayed.
    Choices: List, Grid, Featured, Slider
  • Data Source [Choice] [Required]
    Select where the data should be pulled from.
    Choices: Blog, HubDB, Manual
  • Blog Posts [Group]
    • Post Type [Choice] [Required]
      Listing 
      can only be used on a Blog Listing page. All other types are limited to displaying 250 posts.
      Choices: Recent, Related, Popular, Listing
    • Navigation Type [Choice] [Required]
      If Post Type is set to Listing. To change the number of posts to show at a time, change the Number of posts per listing page in the Templates tab of your portal blog settings.
      Choices: None, Infinite Load, Infinite Scroll
    • Load Button Style [Choice] [Required]
      If Post Type is set to Listing and Navigation Type is not None.
      Choices: Primary, Secondary, Tertiary, Quaternary, Text Link, Text Link (Dark)
    • Blog [Blog]
      Leave blank to use the default blog or blog that this module appears in.
    • Blog Post Override [Repeater Text]
      If Post Type is set to Related, enter the ID of a blog post that should always show, despite all other parameter values and filters.
    • Relevant Blog Posts [Repeater Text]
      If Post Type is set to Related, enter the ID of a blog post to use when finding relevant blog posts. This parameter should only be used when the module is appearing on a page. On blog posts, it will default to the post the module is appearing on.
    • Include [Choice]
      Data to display
      Choices: Thumbnail, Date, Author, Tags, Read Time, Summary
    • Strings [Group]
      If Post Type is set to Listing and Navigation Type is not None
      • Load Button Text [Text] [Required]
      • Loading Message [Text]
        This text is what screen readers will hear while posts are loading. Visually a dot loader will display.
      • End of Content Message [Text] [Required]
        Message that appears when user has reach the end of the content.
      • Error Message [Text] [Required]
        Message that appears if there is a problem loading the posts.
    • Query [Group]
      • Limit [Number] [Required]
        Number of posts to pull in.
      • Time Frame [Choice] [Required]
        If Post Type is set to Popular, set time from of the analytics.
        Choices: All Time, Past Year, Past Six Months, Past Month
      • Query By: [Choice] [Required]
        Filter the posts that are pulled in.
        Choices: None, Tags, Author
      • Tags [Repeater Tag]
      • Tag Logic Operator [Choice]
        Choose whether posts selected must contain all tags (AND) or any tag (OR).
      • Author [Text]
        If Post Type is set to Recent, enter the slug of a blog author to filter posts by.
      • Authors [Repeater Text]
        If Post Type is set to Related, enter the display name of a blog author to query posts by.
      • Start Date [Date]
        If Post Type is set to Related, query posts published after this date.
      • End Date [Date]
        If Post Type is set to Related, query posts published before this date.
  • HubDB [Group]
    If Data Source is set to HubDB, in the provided fields add the column names from your table that you want to map to.
    • Table [HubDB Table]
      Table to pull data from.
    • Thumbnail [Text]
      Must map to an Image column.
    • Date [Text]
      Must map to a Date or Date and time column.
    • Eyebrow [Text]
      Must map to a Text column.
    • Title [Text]
      Must map to a Text column.
    • Summary [Text]
      Must map to a Text column.
    • Pill Tags [Group]
      If Style is set to Grid or Slider
      • Tag [Text]
        Must map to a Text, Select, or Multi-select column.
      • Color Setting [Choice] [Required]
        Choose how to color the pill tags. Set to a single color OR choose a selection of colors to alternate through per card or per tag (only for multi-select columns).
        Choices: Single, Alternate by Card, Alternate by Tag
      • Color [Color]
        If Color Setting is set to Single.
      • Color [Repeater Color]
        If Color Setting is set to Alternate by Card or Alternate by Tag
    • Text Tags [Group]
      • Icon [Common Module Fields]
      • Tag [Text]
        Must map to a Text, Select, or Multi-select column
    • Link [Link]
      Must map to a URL or Text column
  • Manual [Group]
    If Data Source is set to Manual
    • Thumbnail [Image]
    • Date [Date]
    • Eyebrow [Text]
    • Title [Text]
    • Summary [Text]
    • Pill Tags [Repeater Group]
      If Style is set to Grid or Slider
      • Tag [Text]
      • Color [Color]
    • Text Tags [Repeater Group]
      • Icon [Common Module Fields]
      • Tag [Text]
    • Link [Link]
  • Layout [Group]
    • Add Divider [Boolean]
      If Style is set to List.
    • Text Tags Position [Choice]
      Choices: Top of Content, Bottom of Content
    • Date Position [Choice]
      If Style is set to Grid or Slider, on smaller screens "left/right of content" will move the date into a single box above/below the text content.
      Choices: Left on Content, Right of Content, Right of Tags, Left of Tags, In Tags
    • Slider [Common Modules Fields]
      If Style is set to Slider
    • Desktop, Tablet, Mobile [Responsive Groups]
      • Thumbnail Position (Main) [Choice]
        If Style is set to Featured, position of the thumbnail in the first featured item.
        Choices: Top, Right, Bottom, Left, Hide
      • Thumbnail Position [Choice]
        Choices: Top, Right, Bottom, Left, Hide
      • Spacing Between Image and Text [Number]
      • Grid [Common Module Fields]
  • Strings [Group]
    • Read Time Text [Text] [Required]
      Use % to indicate where the dynamically generated number should be placed within the text.
    • Truncate Summary [Text]
      Cut off text after a certain number of characters. Leave blank to display entire text.
    • Date Format [Text] [Required]
      Must be a pattern following Unicode LDML.
    • Month Format [Text] [Required]
      Must be a pattern following Unicode LDML.
    • Day Format [Text] [Required]
      Must be a pattern following Unicode LDML.
  • Slider Strings [Group]
    If Style is set to Slider
    • Slider Label [Text] [Required]
      This element does not display visually.
    • Previous Arrow Label [Text] [Required]
      This element does not display visually.
    • Next Arrow Label [Text] [Required]
      This element does not display visually.
    • First Arrow Label [Text] [Required]
      Aria label for the prev/next button when navigating to the first slide. This element does not display visually.
    • Last Arrow Label [Text] [Required]
      Aria label for the prev/next button when navigating to the last slide. This element does not display visually.
    • Slide Pagination Label [Text] [Required]
      This element does not display visually.
    • Slide Pagination Dot Label [Text] [Required]
      Use %s to dictate where to input the slide number. This element does not display visually.
    • Slide Page Pagination Dot Label [Text] [Required]
      Use %s to dictate where to input the page number. Dots are set as pages when a slider is set to show more than one item at a time. This element does not display visually.
  • Advanced [Common Module Fields]

Styles

  • Dark Mode [Boolean]
    Check to use Dark Mode colors set in the Theme Settings.
  • Module [Group]
  • Card [Group]
  • Thumbnail [Group]
    • Width [Number]
      Leave blank to set as 100% (if top/bottom position) or 30% (if left/right position).
    • Aspect Ratio [Choice] [Required]
      Crop image to a certain aspect ratio.
      Choices: Do Not Crop, 1:1, 3:2, 4:3, 16:9, 9:16, 3:4, 3:2
    • Hover Animation [Choice]
      Choices: None, Zoom In, Zoom Out, Grayscale, Colorize
    • Border [Border]
      Set style, width, and color
    • Radius [Number]
  • Date [Group]
    If Date Position is not set as In Tags. 
  • Eyebrow [Group]
  • Title [Group]
  • Summary [Group]
  • Pill Tags [Group]
    • Minimum Width [Number]
    • Font Styles [Common Module Fields]
    • Padding [Spacing]
  • Text Tags [Group]
    • Divider symbol between links [Choice] [Required]
      Choices: None, Slash, Vertical Bar, Bullet, Caret
    • Font Styles [Common Module Fields]
  • Slider [Group]