- Trusted by 3 million learners
- 24/7 online training
- Money back guarantee
- Fully accredited courses
Hero Section
The Hero Section component is strictly for use at the top of a page and comprises of an image, title blocks and panel for a short description. All fields are required. There is no difference between Style 1 and Style 2.
Accordion Section
What is the Accordion Section component used for?
This component is typically used for FAQs, but can also be used to display other types of information within an accordion style dropdown. The title is bold and there is space for a paragraph. The first accordion is open by default.
What fields are required?
The section title is optional but the accordion title and paragraph are required.
How many accordion panels can I have?
You can display as many as you like, but we'd recommend considering the user experience and keep the list reasonable.
Cards Section -- Callout Cards
The Callout Cards component is great for short selling points or key features.
Features
The component comprises of an orange tick, title field and paragraph field.
Layout
You can have a single panel, two or a maximum of three on one line.
Required fields
Both fields are required and the icon cannot be changed at present.
Limitations
More than three components will start to stack onto a new line. The height of each line is determined by the largest paragraph, as demonstrated here.
Suggestions
We recommend trying to match the paragraph length for the best visual layout and avoiding orophaned words.
Cards Section -- Circular Image
The Circular Image component has space for a title, paragraph and tagline before displaying circular images with accompanying titles and paragraph text.
This component can be used to illustrate more detailed features or points of information. There is a hover effect on each of the panels that creates some interest and focus.
Image format
The best format for the images is a 300 x 300 .png file. Unfortunately there is unnecessary padding within the circular image frame meaning images with a background won't display correctly.
Card layout
You can have a single panel, two or a maximum of three on one line. More than three components will start to stack onto a new line. The height of each line is determined by the largest paragraph.
Required / optional fields
Both the title and image are required, paragraph text is optional as are links, as demonstrated below.
Cards Section -- Hub Cards
The Hub Cards component is ideal for linking to Hub content, but can also be used on landing pages as navigation card panels that link to other pages. The component includes a Section Block that has a required title and optional paragraph.
Link
Features
Each card has a title, image, paragraph, link and label. All of these fields are optional but it is advisable to include all of them for the best user experience.
Article
Optional labels
There are four label options: Link, Article, Resource, and None.
Please note: the 'Download' option currently displays the same as 'Resource'.
Resource
Card layout
You can have a single panel, two or a maximum of three on one line. More than three components will start to stack onto a new line. The height of each line is determined by the largest paragraph.
Images
Images can be exported in any format with a ratio of 1:2, an ideal size for decent quality resolution is 320 x 640px.
Link
Suggestions
A single card can look a bit lost, therefore it is recommended to use at least two, but three is best.
You can leave the link text field blank to only display an arrow icon.
Cards Section -- Product Cards
The Product Card component is used for displaying product information in a card format. The component includes a Section Block that has a required title and optional paragraph. The cards contain an image, reviews rating, title, accreditation pill, price and button to view the specific product page. The details contained on the product cards are set by their product page and cannot be changed within this component. The products are chosen from a drop down list and display left aligned, therefore must be listed in multiples of four. There is an optional link to navigate to view all courses. This can be pointed to a specific category if one is ticked.
