The Grid – Careers component displays all active career posts created within the CMS, where the ‘closing date’ has not yet passed. Career listings in this component are automatically ordered by closing date, with the nearest deadline appearing at the top of the grid.
This component offers a range of configuration options, divided into the following categories:
| Settings |
This section includes general settings that apply 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 to control the size of the grid.
|
| 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 career pod:
- Pod Background Colour: Choose a background colour for the pods, independent of the overall component background. Option values are based on a pre-configured list of brand colours.
- Pod Style: Select how the individual vacancy pods will be displayed. Four layout options are available: ‘Detailed Pods – 1 per row’, ‘Summary Pods (content accordion) – 1 per row’, ‘Standard Pods – 3 per row’, and ‘Standard Pods – 4 per row’.
- Title Colour: Set the colour for the vacancy pod titles. 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.
- Supporting Info Colour: Choose the text colour for supporting details such as the application deadline date. Option values are based on a pre-configured list of brand colours.
- Text Colour: Set the colour for the main content of each vacancy 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: Choose the style for the ‘Read More’ button, with options including: Solid, Outline, Outline with slide animation, Underline, and Underline Pulse Animation.
- Application Deadline Date Prepend: Add text to appear before the vacancy’s deadline date (e.g., “Apply by:”).
- Apply CTA Label: Set the text for the call-to-action link at the bottom of each vacancy pod. By default, this is set to ‘Apply Now’.
|
| Content |
This section does not contain any fields, as the component automatically populates based on career posts created in the CMS.
To add careers into the CMS; hover over the ‘Careers’ link within the sidebar, and click on the ‘Add a New Post’ link visible within the submenu.
The subsequent page will then contain a number of fields, such as vacancy title, description, and application deadline date, which will be used to render the career’s profile page, as well as determine content which will be visible within career pods throughout the website. |
You can view examples of the Grid – Careers component with different styles and animations here.
