Here's an example of an article listing
03 Jul 2023 • 1 minute read
The character limit for the short introduction is 125, so remember to keep it short and simple. This is just long enough.
Article listing component
The article listing component can be used to show the latest articles from within a specific area of a site on a page. If you’re looking for guidance on creating articles within a listing page, go to the ‘Articles and article listing page’ guidance.
Article listing component example
-
-
Another article listing
06 Jun 2023 • 6 minute read
In this example, the short summary is a bit longer, but still within the character limit.
-
How to use the article listing component
The article listing component can be used on any page to display the latest articles from within an article listing section. This allows listings to appear in more than just the original listings page – for example, the homepage, about us page or specific campaign landing pages.
You can choose how many articles from the listing page you want to display in the article listing component. So you could choose to only show the latest 2, or the latest 10 and so on.
Each listing will contain:
- The title of the page (which is also a text link to the article)
- An image
- A summary
- The publish date
- The time to read
These details will all be pulled automatically from the listing page for that article. All this information will be set on the individual article pages rather than within the component itself.
For more information about creating individual articles or the listing page that houses them, go to our articles and article listing page guidance.
Adding an article listing component in the CMS
On a new or existing panel, add an ‘Article Listing Component’. Select which listings page the component should pull article information from, and then select how many to show. The component will automatically pull in the relevant data to the page.
Article listing modifier rules
- Background: default (white) or ‘background’ (grey)
- Grid span: default
- Padding: default, unless required to improve layout
- Alignment: default
Accessibility
The listing component is marked up as a list so that assistive technology can easily scan through the list of article titles.
The article listing component automatically pulls information from the individual articles, so when you’re creating an article make sure you use a clear, descriptive heading and short but informative summary text. Make sure the reading time is accurate so users know what to expect.