ALL of our templates use 'Components', think of these like modular building blocks that form the designs of our templates. Each component, when used in a design, has individual modifiable attributes. The potential creativity is (almost) endless!
Here are most of the popular components. Please bare in mind, not all templates will utilise every component listed below, however templates used for adverts and content only pages has the option to add component in any order however only in the body of the template designs.
Please use this page for more information on our content components, use the search box to help filter out the content type, ranging from 'images', 'wording', 'footer', 'embed' options, 'buttons' and more.
Search Content Components
Use specific search keywords like "Accreditation" instead of full sentences.
Search
Meet the Team & Testimonials
This may cover all or a mixed areas of 'advert layouts', 'vacancy search pages' and 'onboarding'.
Group Image and Text
Perfect to use if you want to use your own icons or testimonials...
Flip Cards
Great for testimonials, maximum 3 photos per component...
Accordian Dropdown
Have a lot of wording, but want to reduce the scrolling: Make it bitesize info...
Timeline: Vertical
Unlimited dates & text with images that is displayed vertically...
Benefits & Values
This may cover all or a mixed areas of 'advert layouts', 'vacancy search pages' and 'onboarding'.
Animated Icons
A library of animated icons that can be your colours...
Group Icons and Text
Using 'Font awesome' icon library, typical for benefits / values or any text...
Accordian: ICONS
Up to 16 'Font Awesome' icons in an accordian, good for benefits / values etc...
History & Process
This may cover all or a mixed areas of 'advert layouts', 'vacancy search pages' and 'onboarding'.
Timeline: Horizontal
Maximum of 5 dates & text per component that displays horizontally...
Timeline: Vertical
Unlimited dates & text with images that is displayed vertically...
Showcase your company / workplace
This may cover all or a mixed areas of 'advert layouts', 'vacancy search pages' and 'onboarding'.
Video Embedding
Embed your public 'Youtube' or 'Vimeo' urls only on various pages...
Image Carousel
Auto scrolling 5 image gallery that has clickable arrows...
Google Map
Add a singular map & location to your custom content area...
Title and Paragraph
A simple wording only component where the title is a larger font...
Paragraph and Image
Paragraph to one side with an image to the other side, left or right...
Single Image
Singular image by itself to keep it simple and visual...
Image and Image
Display two images side by side if you want to show more visuals...
Call to Action
This may cover all or a mixed areas of 'advert layouts', 'vacancy search pages' and 'onboarding'.
Image and Button
Max of 5: Thumbnail images with button below to link your sites...
Buttons
Add up to 5 buttons side by side that can link your sites...
Content that appears in all templates
This may cover all or a mixed areas of 'advert layouts', 'vacancy search pages' and 'onboarding'.
*Design may vary dependent on template
Brand Logo
The logo is just the one logo only and typically displays top left...
Navigation
Navigation may look different per template and may function differently...
Merge Fields
Data added onto various forms pulls here and may be amendable...
Header Banner
Header banner scales and changes shape responsively and varies in style...
Footer Wording
Add wording and hyperlinks such as emails, phone numbers and other links...
Footer Social Media Icons
Add up to 5 social media icons linking your socials...
Footer Accreditations
Add up to 5 accreditation images in the footer to show off your awards...
Footer
Footer information can be different per template or be the same...
...
Flip Cards
The FlipCard component can be used in various ways to display important information and imagery. The front of the card utilises a showcase image underlined with title & text. When you hover the card, the flip animation activates, showing a short phrase or sentence. This can be very useful for criteria such as Meet the Team (profile cards), Testimonials, Company Values, and much more.
Front image: Good quality .jpg file at 72dpi, square in size, with a central focus.
Provide a header title, and/or text, with some text for the back of the card as well.
Use a similar character length to what is show in the preview.
Maximum 3 cards to a row with multiple rows possible.
Card-back colour customisations: Background and text can be Primary/Secondary/Dark colour combinations as long as accessible.
Image resizing and cropping may occur.System responsive
...
This component can help to display a long list of information such as company benefits or values. The animated icons below are the only icons available.
Colour customisation: Primary/Secondary/Dark icon colour options available
...
Group Image and Text
This section allows the display of a group of images, each supported by a title and text.
While technically there is no restriction on the number of images that can be added here,
we recommend that they are provided in multiples of three and have up to a maximum of three
rows (9 images). We must be provided with good quality images that we can scale to the
appropriate size, anything above 500x500 pixels. We also require the title and text for
each image. These images can be displayed square or circular.
Anna SteeleSenior HR Partner
Nathan HessionHR Manager
Alicia NolanAccount Development Manager
Amanda MatherData Analyst
Robert HewittProject Manager
Matthew VickersC.E.O
Provide images at 500x500 pixels or larger.
For maximum conversion: Use a maximum of 9 images in multiples of three.
Customisation options available.
...
Accordian: ICONS
The icon accordian is a great content component to show off a long list of your benefits as an example if you want to show a lot more than just a few highlights, however this is only using our Font Awesome icon library.
Provide short single wording for best results.
Maximum of 16 icons
Intro / Exit paragraph can be hidden if not needed, however no word limit.
Font awesome icons only - this compnent doesnt support your own icons.
...
Timeline: Horizontal
This component can be used to display important historical events of the company, or even used for step-by-step information for a process or application.
Provide a header title (Date/year etc.) and accompanying text at a similiar character length as show in the preview.
There are 5 timeline events to a row, with multiple rows possible.
Timeline dot is available in system Primary/Secondary/Dark colours.
...
Timeline: Vertical
This component can be used to display important historical events of the company, or even used for step-by-step information for a process or application.
Provide a header title (Date/year etc.) and accompanying text at a similiar character length as show in the preview.
Customisable: Background colour of the text can be system primary or system secondary colour.
...
Video embedding
We can include an embedded Vimeo or YouTube video in our range of products. This can provide users with a more indepth view into your company, present them with the benefits of working with you or anything else you can contain within a short video. It is advised to keep the video short, we advise under 2 minutes, as anything longer than this may lose the attention of a potential candidate and keep them from applying for a vacancy.
Provide the url of the video.
Styling not customisable.
...
Image Carousel
The carousel feature allows you to present a selection of sliding images. This component can be used to provide any user with lots of content without taking up too much space. You can present a maximum of five images on this slider, this is to ensure any user is not overwhelmed with too much information and is distracted from the aim of our products. The carousel can be altered to span the full width of the screen or be presented smaller if the content requires it to be.
This section allows the display of a group of icons, each supported by a title.
While technically there is no restriction on the number of icons that can be added here,
we recommend that they are provided in multiples of three and have up to a maximum of three
rows (9 images). We must be provided with the titles for this section along with the order
they are to be displayed. By default we will source the icons for you using a service called
Font Awesome, this is the service we use for any other icons used across our products and this is
to build up a layer of consistency.
Private Healthcare
Company Bonus Scheme
Development Scheme
Free Tea & Coffee
Cycle To Work Scheme
Choice of Equipment
Provide each feature with no more than 20 characters of text (including spaces).
Provide the name (Title) of the section. I.E. "Why Us?".
Fontawesome icons used by default.
For optimal conversion: Use primary brand colour.
Customisable: Primary or secondary brand colour used for the icon & text. AA Restrictions
...
Image and Button
The Image & Button component allows you to provide up to 5 images each with an attached button. This component can be used for a wide variety of purposes for example presenting a range
of sub level brands. You can provide up to five images and specify where each button should link to. Depending on the product this component is used on the buttons can either link to a
different page on the product or an external site of your choosing.
Buttons can link to a different page on the same site or an external site.
Buttons use primary colour by default.
Customisable: Primary or secondary brand colour used for buttons. AA Restrictions
Customisation options available.
...
Image and Image
The Image & Image component allows you to present a two images alongside one another. This component can be used to provide photos or images to support content
found in other components. These two images will be displayed alongside each other both filling half of the available space. This gives each image equal focus and
makes the Image & Image component easier to line up with other components which can provide further information on each image.
Maximum two images.
Both images to be provided in a large format using the same size.
...
Buttons
This button component allows you to add a button to any of our products. This gives you the option to present the user with a clickable link which stands out from
the rest of your content. The use of this component can vary across our products and templates. The button can be used to either link to another page of the site or an
external site. This means it can be used as a navigation tool on your site or take a user to your companies website for further information.
Button can link to a different page on the same site or an external site.
Button uses primary colour by default.
Customisable: Primary or secondary brand colour used for button. AA Restrictions
...
Title and Paragraph
The title and paragraph component allows you to present a section of text with it's own accompanying title. This basic content component can be used to
provide the user with a lot of information in a single area. This component is best used amongst other, more complex, components in order to break up
your content.
Placeholder Title
This is a paragraph of placeholder text. You will be able to fill in this text area with your content. We advise you don't overfill the text area with
too much content. This is to ensure the user isn't overfaced with content and entices the user to read what you have to say.
Component can hold a title and area of text.
For optimal conversion: Don't overfill the text area with content.
...
Single image
We can include a single image by itself in any order, above or below any other content components.
Front image: Good quality .jpg file at 72dpi, square in size, with a central focus.
...
Paragraph and image
The Paragraph & Image component allows you to present a paragraph of text alongside a single image. This component allows you to provide the user with
a large amount of content accompanied with an image to break it up. By default the image will be on the left side and the paragraph on the right but this
can be altered if you require it to be. This component can be used for the main bulk of your content and repeated across our range of products. We advise
you to keep the content within each component to a minimum and use multiple Paragraph & Image components if you have a lot of content. This component can
also make use of a single button at the end of your paragraph of text which takes the user to either an external site or different page.
Front image: Good quality .jpg file at 72dpi, square in size, with a central focus.
Provide a header title, and/or text, with some text for the back of the card as well.
Use a similar character length to what is show in the preview.
Maximum 3 cards to a row with multiple rows possible.
Card-back colour customisations: Background and text can be Primary/Secondary/Dark colour combinations as long as accessible.
Image resizing and cropping may occur.System responsive
...
Accordian Dropdown
The Accordion Dropdown component allows for a large amount of text content to be presented as a dropdown. This allows you to provide a large
amount of content to the user without creating a large page and overface the user. This component can be used on its own to hide a single section
of content behind a single title or paired with multiples of the Accordion Dropdown component to create a larger accordion feature. These dropdowns
can be set to either hide or display the content as a default.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et elit congue, bibendum mauris in, vestibulum elit. Cras non ligula eros. Morbi viverra posuere ex, vitae bibendum diam malesuada eu. Integer nec malesuada lacus, id ornare mauris. Integer commodo odio eu porta euismod. Nullam pulvinar, risus a ullamcorper rhoncus, arcu arcu dapibus lacus, in congue risus nibh tincidunt ante. Vivamus a viverra massa. Aenean consectetur risus lacus, vel accumsan mauris feugiat vel. Pellentesque sit amet est laoreet leo gravida tristique. Morbi id mi nisi. Proin ac vestibulum ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et elit congue, bibendum mauris in, vestibulum elit. Cras non ligula eros. Morbi viverra posuere ex, vitae bibendum diam malesuada eu. Integer nec malesuada lacus, id ornare mauris. Integer commodo odio eu porta euismod. Nullam pulvinar, risus a ullamcorper rhoncus, arcu arcu dapibus lacus, in congue risus nibh tincidunt ante. Vivamus a viverra massa. Aenean consectetur risus lacus, vel accumsan mauris feugiat vel. Pellentesque sit amet est laoreet leo gravida tristique. Morbi id mi nisi. Proin ac vestibulum ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et elit congue, bibendum mauris in, vestibulum elit. Cras non ligula eros. Morbi viverra posuere ex, vitae bibendum diam malesuada eu. Integer nec malesuada lacus, id ornare mauris. Integer commodo odio eu porta euismod. Nullam pulvinar, risus a ullamcorper rhoncus, arcu arcu dapibus lacus, in congue risus nibh tincidunt ante. Vivamus a viverra massa. Aenean consectetur risus lacus, vel accumsan mauris feugiat vel. Pellentesque sit amet est laoreet leo gravida tristique. Morbi id mi nisi. Proin ac vestibulum ligula.
Provide a single, large format, image along with a paragraph of text.
Customisable: Order of paragraph & image can be changed. AA Restrictions
Styling not customisable. System Driven
...
Footer wording
The footer wording can contain hyperlinks, email links and phone numbers. Or any wording you require
The under footer text component (below social media icons) allows you to present a section of text below any footer content you have. This basic content component can be used to provide the user
with a lot of information at the foot of your page. This component is best used to prevent over filling the footer component and ensures the footer component is easy to
digest for any users.
For optimal conversion: Don't overfill the text area with content.
...
Brand Logo
The logo which is pulled into each of our products comes
from the main system logo we use for your client
account. This means that this logo will remain the same across
all of your products and build up a layer of consistency. We
require this logo to be sent over either as a .SVG file or .EPS
file. These two file types will allow us to present the best quality
image of your logo across all of our products.
If you don’t have your logo as either of these file types then the
next best thing would be a .PNG file which shows your logo with
a transparent background (not a white background). This is still
not ideal as if the logo was to be increased in size then some of
the sharpness of the design would be lost.
Should you have any specialist specifications for working with
your logo, usually laid out in brand guidelines, then please
send these over so that we can work within these parameters.
Uses system logo or nearest brand logo.
Custom URL / Link possible.
For maximum conversion: Display SVG logo.
Styling not customisable. System Driven
...
Navigation
The navigation across each of our products may differ slightly. This is based on what the navigation is presenting the user with. Overall our navigations aim to be simple and pared back
to allow the user to easily find what they are looking for. Each navigation may be different but will aim to reinforce your brand through the use of your client logo and primary colour if possible.
Variation across range of products.
The links are defined by the system.
Styling not customisable. System Driven
...
Merge Fields
The merge fields are what pull through the information specific
to each vacancy or user and you can decide exactly what information is
displayed. You will be able to discuss your desired merge fields
during your consultation and these can be generic or specific
to you.
The only thing we require from you is to tell us the information
you’re wanting to display to your users and we will sort
the rest. Whilst the information that is pulled through is fully
customisable, the layout often cannot be customised.
Vacancy Salary: £ 25,000 per annum.
Vacancy Location: Otley, United Kingdom.
Vacancy Status:14 days left to apply!
Merge fields available are defined by the implementation team.
Maximum number of merge fields is defined by the template.
Styling not customisable. System Driven
...
Header Banner
The header banner can differ across our range of products. It will generally sit at the top of a page and aim to reinforce your brand and provide important information to a user. The content and sizing of the header banner will be defined by each product and template.
Style of media is defined by the template.
For optimal conversion: Use primary brand colour.
Customisation options available.
...
Google Map
Google maps can be embedded across our range of products in order to show users a location, whether this is the location of a vacancy or a new starters first day location. Google maps will differ across our range of products based upon the circumstance they are used and the template they are embedded into.
Variation across range of products.
Styling not customisable. Google Restrictions
...
Footer Social Media Icons
The social media icons can differ across our range of products but generally sit at the bottom of a page. They are often displayed in the footer and allow you to navigate (by means of a new tab that opens up, so not to drive you away from the advert) to the respective social media platform. You may choose any combination of these icons and must provide a URL to the respective profile page.
Styling of these icons is defined by the product and template.
Provide a URL for each icon.
For optimal conversion: Use primary brand colour.
Customisable: Primary or secondary icon colour. AA Restrictions
...
Footer Accreditations
The accreditation component allows you to present a certain number of award/accreditation logos across our range of products.
The exact presentation of these accreditations can differ across our products and templates. It is therefore advised to view
the product and template you wish to use in order to get a clearer idea of this component's use.
Component can differ across products and templates.
Often found in the footer or similar location.
Styling of this component is defined by the product and template.
...
Footer
The footer marks the bottom of the page and contains various pieces of important information. Each product and template handles the footer slightly differently and therefore you see slight variation across our products. Each footer aims to provide the user with any information they may require in the footer while keeping the design simple to allow them to find what they need.
Styling of the footer is defined by the product and template.
