The Grid – Team Members component allows administrators to hand-pick specific team members from the ‘Team Members’ post type to display. Each instance of this component can showcase a different set of team members, making it useful for splitting team members by office, country, department, or other criteria.
This component offers a range 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: Control the width of the component.
|
| Animation |
Administrators can choose 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 team member pod:
- Pod Background Colour: Choose the background colour for the team member pods, which can differ from the overall component background. Option values are based on a pre-configured list of brand colours.
- Pod Style: Select how the team member pods will be rendered. Available styles include: ‘Full width image above content (3 per row)’, ‘Full width image above content (4 per row)’, ‘Simple – no image (3 per row)’, ‘Simple – no image (4 per row)’, and ‘Image left, content right (2 per row)’.
- Title Colour: Set the text colour for the team member’s name. Option values are based on a pre-configured list of brand colours.
- Title Style: Choose the heading size for the team member’s name, with options ranging from Heading 1 to Small Paragraph.
- Designation Colour: Set the text colour for the team member’s designation (e.g., job title). Option values are based on a pre-configured list of brand colours.
- Text Colour: Choose the colour for the main content text in the pod. Option values are based on a pre-configured list of brand colours.
- Button Colour: Set the colour for the ‘Read More’ button. 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 label for the ‘Read More’ button, which links to the team member’s profile page. The default label is ‘View Profile.’
|
| Content |
This section includes a multi-select field where administrators can add, remove, and reorder team members by dragging and dropping them into the desired order. |
You can view examples of the Grid – Team Members component in various styles and animations here.
