The Grid – Latest News component allows you to showcase a predefined number of recent news articles in a grid format, anywhere across your website. News articles are displayed in order of their publication date, with the most recent at the top.
This component provides several configuration options, divided into the following categories:
| Settings |
This section includes general settings that are applicable to all components in the system:
- Hide on Mobile/Tablet/Desktop: Pick whether to hide, or show this component independently on mobile, tablet, and desktop resolutions via a set of three checkboxes.
- Desktop/Mobile Padding: Adjust the top and bottom padding for both desktop and mobile views.
- Section Background Colour: Choose a background colour from a pre-configured list of brand colours.
- Section Width: Set the component’s width.
|
| Animation |
Administrators can select from seven different entrance animations for the news grid:
- None
- Slide in from the top
- Slide in from the bottom
- Slide in from the left
- Slide in from the right
- Fade in
- Grow in
|
| Grid Styling and Configuration |
This section allows administrators to customise the layout and appearance of the news grid:
- Results to show: Set the number of news articles to display in the grid, with the most recent ones appearing first.
- Filter by Category: Select one or more news categories to filter and display articles tagged with those categories.
- Pods Per Row: Choose how many articles (pods) should appear per row. If the number of articles exceeds the pods per row value, the extra articles will overflow onto the next row. Options range from 1 to 4 pods per row.
- Pod Style: Select how individual news pods will be rendered. Available styles include: ‘Full width image above content’, ‘Simple – no image’, and ‘Background image behind content’.
- Pod Background Colour: Set the background colour for individual pods, which can differ from the overall component’s background. Option values are based on a pre-configured list of brand colours.
- Supporting Info Colour: Set the text colour for supporting information, such as the publication date and news category. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Colour: Choose the colour of the separator character placed between the publish date and the news category. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Content: Select the separator character to be placed between the publish date and news category (default is the pipe ‘|’ character).
- Title Colour: Set the text colour for the news article title. Option values are based on a pre-configured list of brand colours.
- Title Style: Choose the heading size for the title, with options ranging from Heading 1 to Small Paragraph.
- Text Colour: Set the text colour for the content paragraph in each news pod. Option values are based on a pre-configured list of brand colours.
- Button Colour: Choose the colour for the ‘Read More’ button at the bottom of each news pod. Option values are based on a pre-configured list of brand colours.
- Button Style: Select the style for the ‘Read More’ button, with options including: Solid, Outline, Outline with slide animation, Underline, and Underline Pulse Animation.
- Read More Label: Set the text for the ‘Read More’ link, which leads to the full news article. By default, this label is set to ‘Read More’.
|
You can view examples of the Grid – Latest News component in different styles and animations here.
