Skip to main content

Article Listing Block

Overview

Article listing block is used to show a list of articles that can be logically represented as grid of cards and rows. It contains content about a single article with limited amount of information and provides a way for a user to access an article page. With this block, you can link to article pages that have been created manually, or have them display automatically from a certain category.

Contents:

  • Block customization options
  • Block examples:
    • 3 articles per row without a button
    • 4 articles per row with a primary button
    • 2 articles per row with a secondary button and an icon

Article Listing Block Illustration

Block Customization Options

Element Required Options Available
Reduce bottom padding N Checkbox
Background color N
  • Light blue
  • None 
Article pulling method Y
  • Manually curated
  • Automated
Article count per row N 2-8 cards
Display button N Checkbox
Button size N
  • Default size
  • Small Size
Button style N
  • Primary button
  • Secondary button
  • Tetriary button
  • Ghost button
Use button url N Checkbox
Button URL Y
  • Page
  • Categories
  • Media
  • E-mail
  • Phone number
  • External link
  • Remaining URL
  • External link
Display button icon N Checkbox

3 articles per row without a button

Automated Tests: Article Listing Page - Layout & Structure Blocks 5

Automated Tests: Article Detail Page - Article Content Body - Layout & Structure Blocks 5

Automated Tests: Article Detail Page - Article Content Body - Layout & Structure Blocks 5

1 minute

Automated Tests: Article Listing Page - Calls to Action & Promotional Blocks

Automated Tests: Article Detail Page - Article Content Body - Calls to Action & Promotional Blocks

Automated Tests: Article Detail Page - Article Content Body - Calls to Action & Promotional Blocks

1 minute

Automated Tests: Article Listing Page - Content Blocks

Automated Tests: Article Detail Page - Article Content Body - Content Blocks

Automated Tests: Article Detail Page - Article Content Body - Content Blocks

1 minute

Block above has these settings:

Element Option Selected
Background color Not selected
Article pulling method Manually curated
Article count per row 3 cards
Display button Not checked

4 articles per row with a primary button

Automated Tests: Article Listing Page - Layout & Structure Blocks 5

Automated Tests: Article Detail Page - Article Content Body - Layout & Structure Blocks 5

Automated Tests: Article Detail Page - Article Content Body - Layout & Structure Blocks 5

1 minute

Automated Tests: Article Listing Page - Calls to Action & Promotional Blocks

Automated Tests: Article Detail Page - Article Content Body - Calls to Action & Promotional Blocks

Automated Tests: Article Detail Page - Article Content Body - Calls to Action & Promotional Blocks

1 minute

Automated Tests: Article Listing Page - Content Blocks

Automated Tests: Article Detail Page - Article Content Body - Content Blocks

Automated Tests: Article Detail Page - Article Content Body - Content Blocks

1 minute

Automated Tests: Article Listing Page - Media Blocks 2

Automated Tests: Article Detail Page - Article Content Body - Media Blocks 2

Automated Tests: Article Detail Page - Article Content Body - Media Blocks 2

1 minute
Visit Travelers (Opens in a new window)

Block above has these settings:

Element Option Selected
Background color Light blue
Article pulling method Manually curated
Article count per row 4 cards
Display button Checked
Button size Default size
Button style Primary button
Button URL External link
Display button icon Not checked

2 articles per row with a secondary button and an icon

Automated Tests: Article Listing Page - Media Blocks 2

Automated Tests: Article Detail Page - Article Content Body - Media Blocks 2

Automated Tests: Article Detail Page - Article Content Body - Media Blocks 2

1 minute
Button

Block above has these settings:

Element Option Selected
Background color None
Article pulling method Manually curated
Article count per row 2 cards
Display button Checked
Button size Default size
Button style Secondary button
Button URL External link
Display button icon Checked
Icon alignment First