Listpage - Responsive theme

This page covers the appearance, elements & functionality of the Listpage for the Responsive Theme

Return to main Themes article

Listpage elements

Listpage responsive - all

(Image credit: Future)
  • Displays content based on filters such as article type, category type, tags
    • has right hand rail for Ads and Widgets
  • Visible on desktop layout
  • Visible on mobile layout

Title

  • Title for listpage
  • Visible on desktop layout
  • Visible on mobile layout

Listpage responsive - title

(Image credit: Future)

Article Components

  • Dek (label / lozenge)
    • Set from the CMS, either explicitly with the articles Dek/label field, or is derived from the vertical ? field 
  • Listing image
    • Set in the CMS, if no listing image is specified, the hero image will be used
    • Only first listing image is displayed when in mobile layout
  • Article Heading / Title
    • Set in the CMS
  • Byline
    • Author(s) set in the cms, date (? think sites may display differently based on published/edited/re-published status, need to check)
  • Rating
    • Only review (type) articles will have ratings, and these are only shown in the listpages if the site uses the star rating format where as sites such as pcgamer that use a number system do not display ratings on their list pages
  • Synopsis
    • Set in the CMS
  • Visible on desktop layout
  • Visible on mobile layout

Listpage responsive - article components

(Image credit: Future)

Carousel

  • Can be Chronological or Curated
    • if chronological will pull in most recent content relevant to the listpage
    • if curated will be static & controlled by editorial in the CMS
  • Visible on desktop layout
  • Visible on mobile layout

Listpage responsive - carousel

(Image credit: Future)

Articles

  • Most recent content relevant to this page
  • Can have a sponsored article slot
  • Will usually contain 10, 20 or 30 articles per page
  • Visible on desktop layout
  • Visible on mobile layout

Listpage responsive - articles

(Image credit: Future)

Pagination

  • Allows user to navigate to older content
    • beyond 9 pages deep will take user to the archives page
  • Visible on desktop layout
  • Visible on mobile layout

Listpage responsive - pagination

(Image credit: Future)

Test Author

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.