The Latest News Carousel component allows you to showcase a set number of recent news articles anywhere on the website using a sliding carousel format. The articles are displayed in order of publication date, with the most recent appearing first.
This component provides a variety of configuration options, divided into the following categories:
| Settings |
This section includes general settings that are shared across all components within 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.
|
| Animation |
Administrators can select from seven different entrance animation options:
- 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
|
| Slider Configuration |
This section allows administrators to configure settings specific to the slider:
- Slide Duration: Set how long each slide remains visible before switching to the next. By default, the duration is 6 seconds. Hovering over or interacting with a slide pauses the timer.
- Icon Colour: Set the outline and background colours for the slide indicators using pre-configured brand colours.
- Results to show: Choose how many news articles to display in the carousel, with the most recent appearing first.
- Slides to Show (Mobile Horizontal): Set the number of visible slides for resolutions between 768px and 1023px wide. For narrower resolutions, only one slide is shown at a time.
- Slides to Show (Tablet): Set the number of visible slides for resolutions between 1024px and 1279px wide.
- Slides to Show (Small Desktop): Set the number of visible slides for resolutions between 1280px and 1535px wide.
- Slides to Show (Large Desktop): Set the number of visible slides for resolutions wider than 1535px.
- Filter by Category: Use optional checkboxes to filter news articles by category. Only articles tagged with the selected categories will be displayed.
|
| Pod Styling |
This section allows administrators to style individual news pods within the carousel:
- Pod Background Colour: Set the background colour for each news pod. This may differ from the background of the overall component. Option values are based on a pre-configured list of brand colours.
- Pod Style: Choose how to display news pods, with three styles available: ‘Full width image above content’, ‘Simple – no image’, and ‘Background image behind content.’
- Supporting Info Colour: Choose the text colour for article details such as the published date and category. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Colour: Set the colour of the separator character between the publish date and category. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Content: Choose the separator character between the publish date and category. The default is a pipe ‘|’ character.
- Title Colour: Set the colour for the news article title text. Option values are based on a pre-configured list of brand colours.
- Title Style: Select the heading size for the title, with options ranging from Heading 1 to Small Paragraph.
- Text Colour: Set the text colour for the article’s content paragraph. Option values are based on a pre-configured list of brand colours.
- Button Colour: Choose the colour for the ‘Read More’ button. Option values are based on a pre-configured list of brand colours.
- Button Style: Choose the button style, with options such as Solid, Outline, Outline with Slide Animation, Underline, and Underline Pulse Animation.
- Read More Label: Set the text for the ‘Read More’ link that directs users to the full news article. By default, this label is ‘Read More.’
|
You can view examples of Latest News Carousels in various styles and animations here.
