The Grid – Projects component is used to showcase all project posts available within the system. This grid can be paginated, with the number of results per page controlled by a field within the component’s settings.
This component offers several configuration options, divided into the following categories:
| Settings |
This section contains general settings common to 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.
- Section Width: Set the width of the component.
|
| Animation |
Administrators can select from seven entrance animation options for the 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
|
| Pod Styling |
This section allows administrators to customise the appearance of each project pod:
- Pods Per Row: Choose the number of project pods to display per row.
- Pod Style: Choose how individual project pods are rendered within the grid. Available styles include::‘Full width image above content’, ‘Simple – no image’, and ‘Background image behind content’.
- Results Per Page: Set the number of projects to display per page. If you want to show all results without pagination, set the value to -1.
- Pod Background Colour: Select the background colour for the project pods. This can be different from the overall component’s background. Option values are based on a pre-configured list of brand colours.
- Supporting Info Colour: Choose the text colour for supporting details, such as the publish date. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Colour: Set the colour for the separator character placed between the publish date and other details. Option values are based on a pre-configured list of brand colours.
- Supporting Info Separator Content: Choose the separator character (default is a pipe ‘|’) to be placed between the publish date and other details.
- Title Colour: Set the text colour for the project titles. Option values are based on a pre-configured list of brand colours.
- Title Style: Choose the heading size for the project title, with options ranging from Heading 1 to Small Paragraph.
- Text Colour: Set the colour for the content paragraph in each project pod. 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: Select 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 at the bottom of each project pod, which directs users to the associated project page. By default, this label reads ‘Read More’.
|
You can view examples of the Grid – Projects component in various styles and with different entry animations here.
