The Grid – Linkable Pods component allows administrators to manually build a grid of pods, each linking to any internal or external resource. This flexible component caters to a wide range of use cases, providing the ability to customise and link multiple resources in a visually appealing way.
This component offers a variety of configuration options, divided into the following categories:
| Settings |
This section includes general settings that are common 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.
- Section Width: Set the width of the component.
|
| 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
|
| Pod Styling |
This section allows administrators to customise the appearance and layout of each linkable pod:
- Pods Per Row: Choose how many pods should be displayed per row. If the number of pods exceeds this value, extra pods will overflow onto the next row. Options range from 1 to 4 pods per row.
- Image Position: If images are used in the pods, this setting determines whether the image appears above or to the left of the pod content.
- Pod Background Colour: Set the background colour for each pod. This can differ from the overall component background. Option values are based on a pre-configured list of brand colours.
- Text Alignment: Choose the text alignment (left, right, or centre) for content within the pod.
- Icon Width: If icons are used, set the width (in pixels) for all icons within the component.
- Icon Margin Bottom: Set the spacing (in pixels) between the icon and the content below it.
- Title Colour: Choose the text colour for the pod title from the brand colour palette. Option values are based on a pre-configured list of brand colours.
- Title Style: Select the heading size for the pod title, with options ranging from Heading 1 to Small Paragraph.
- Text Colour: Set the colour of the content paragraph text using the pre-configured brand colours.
- Button Colour: Choose the colour for the ‘Read More’ button from the 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.
|
| Content |
This section provides a repeater field where administrators can create and manage linkable pods. Each pod can include the following fields:
- Icon: Optionally upload an icon (SVG recommended) to be placed above the pod title.
- Title: Add an optional title for the pod.
- Content: Use the WYSIWYG editor to add and format paragraphs of text relevant to the pod.
- CTA: Configure the button’s optional link, label, and choose whether the link opens in a new tab or the same tab.
- Image: Optionally upload a jpg or png image, which will appear either above or to the left of the pod content, depending on the Image Position setting.
|
You can view examples of the Grid – Linkable Pods component in various styles and animations here.
