Course builder components and their settings

Components are the building blocks of a course page: headings, text, images, questions, tables, cards and layouts. You drag them from the list on the left of the course builder into a module, then click one to fill it in and change its settings. This article describes every component and what it is for. The controls most components share, such as the text toolbar and adding an image, are described once at the start and referred to after that.

For dragging components into a module and putting them in order, see Adding and ordering content in a course. For the controls around the canvas, such as backgrounds, animation, AI and Preview, see Using the course builder’s canvas tools.

Finding a component in the course builder

The component list on the left groups components under Text, Media, Assessments, Add-ons, Interactive, Dynamic Elements and Layout. Type into Search components to find one by its name or its group.

Drag a component onto the canvas to put it exactly where you want it. Or click it, or press Enter or Space while it is focused, to add it at the end of the page you are working on; this is also how to add components from the keyboard. On the cover and closing page, Page break and the questions are greyed out, because they only work inside a module.

Hub content pages are built with the same components, apart from questions, Practice scenario, Code block, Tags, Stepped reveal, Flip card and Image hotspot, so this article applies to them too.

Group	Components
Text	Heading, Subheading, Text, Callout, Quote, Bulleted list, Numbered list
Media	Image, Video, Document, Before / after
Assessments	Single choice, Multiple choice, Ordering, Open text, True / False, Drag to match, Practice scenario
Add-ons	Divider, Spacer, Page break, Table, Accordion, Code block
Interactive	Stat card, CTA block, Hero title, Tags, Feature card, Numbered steps, Timeline, Tabs, Process flow, Key takeaways
Dynamic Elements	Stepped reveal, Flip card, Image hotspot
Layout	One column, Two columns, 1+2 columns, 2+1 columns, Three columns, Four columns

There is no audio component. Narration is added to a component with a voiceover; see Adding a voiceover to a component.

Moving, duplicating and deleting a component

Click a component to select it. Its toolbar appears, and at the right-hand end of every component’s toolbar are Move up one, Move down one, Move to top, Move to bottom, Duplicate and Delete. Delete asks Delete component? first. You can also drag a component by the handle that appears at its left when you point at it, Drag to reorder.

A component inside a column or an accordion has no drag handle. Move it with the move buttons, which move it within its column or accordion. To take it out, delete it and drop a new one where you want it.

Click an empty part of the canvas, or press Esc, to deselect.

Formatting text in the course builder

Every component with text in it uses the same text toolbar, which opens when you click into the text. Select the words you want to change first; with nothing selected, a change applies to the whole component.

Screenshot missingtext-formatting-toolbar

A Text component selected in the course builder with some words highlighted, and the text toolbar open above it. Row one shows the Text colour swatch, the font size (16px), the font family (Inter), Bold, Italic, Underline, Strikethrough, Line height, Letter spacing, Text case and Reset formatting. Row two shows Align left, Align centre, Align right, Insert link, Insert emoji, AI, the microphone for speech input, the speaker for Voiceover, then the move buttons, Duplicate and Delete. To the left of the component, the smaller toolbar shows Background colour, the pattern picker and Padding.

Expected at src/assets/screenshots/guides/course-builder-components/text-formatting-toolbar.png

Control	What it does
Text colour	Colour of the selected text. See Choosing colours in the course builder
Font size	From 10 to 96 pixels
Font family	Any of 36 fonts, each shown in its own style
Bold, Italic, Underline, Strikethrough	Switch the style on and off
Line height	The space between lines, from 1.0 to 2.0
Letter spacing	From tight to very wide
Text case	Normal, UPPERCASE, lowercase or Capitalised, without retyping
Reset formatting	After Reset all formatting?, puts colour, size, font and alignment back to your branding. The words are not changed
Align left, Align centre, Align right	Alignment of the paragraph
Insert link	See Adding a link to text in a course
Insert emoji	Opens an emoji picker with a search box
AI	On Text components only. See Improving text with AI
Microphone	See Dictating text with speech input
Speaker	Voiceover. See Adding a voiceover to a component

Fonts and colours start from your organisation’s branding. Leaving them alone is usually the right choice: a course that follows the branding picks up any later change to it.

There are no buttons for bullets, numbering or heading levels. To make a list, use Bulleted list or Numbered list. To change a heading into a subheading, replace the component.

Short text boxes inside other components, such as a button label, have a smaller toolbar: Text colour, Bold, Italic and the microphone.

Adding a link to text in a course

Select the words that should be the link. Insert link stays greyed out until you do.
Choose Insert link, and paste the address into Paste link here.
Leave Open in new tab ticked so learners do not lose their place in the course, and choose Apply.

To change or remove a link, select it and choose Insert link again; applying an empty address removes it. While you are editing, Ctrl+click a link to open it.

Dictating text with speech input

The microphone button, Start speech input, types what you say into the component. Choose it again, Stop speech input, to finish. It works in Chrome and Edge; other browsers show Speech input isn’t supported in your browser - try Chrome or Edge.

Improving text with AI

AI in the toolbar of a Text component asks Lenni to work on that one component. It appears where AI features are switched on, and it only offers something once the component has text in it.

Improve this paragraph corrects grammar and spelling and makes the text clearer, keeping its meaning. It replaces the text in the component
Add a scenario adds a new paragraph below with a practical example of what the text describes. Set the Length from one to five paragraphs

Undo appears afterwards to reverse it. To write new content on a topic, use AI above the canvas instead; see Adding content to a module with AI.

Text backgrounds, patterns and padding

Heading, Subheading, Text and the two lists have a second, smaller toolbar to their left while selected. It holds Background colour, a background pattern (such as circles, rings, a grid or diagonals) and Padding, from None to Extra large, which is the space between the text and the edge of its background.

A pattern is decoration, and busy ones make text harder to read. Check the accessibility indicator above the canvas after adding one; see Checking colour contrast with the accessibility checker.

Adding a voiceover to a component

A voiceover is spoken narration of a component’s text, generated for you. Learners see a play button above the component and can listen instead of, or as well as, reading. Use it for learners who prefer to listen, or where people take training away from a desk.

Voiceovers are available on Heading, Subheading, Text, Bulleted list, Numbered list and Callout, where AI features are switched on.

Write the text first. A component with no text shows Add text to this block before generating voiceover.
Choose the speaker, Voiceover, in the text toolbar.
Choose a Voice: a female or male British English voice. Your choice is remembered for next time.
Choose Generate. When you see Voiceover ready, a player appears under the component so you can listen, with a choice of playback speed.

While it is being removed the button reads Removing voiceover…. If a learner’s narration cannot be loaded, they see Audio unavailable instead of the play button, and the rest of the page is unaffected.

If you change the text afterwards, the voiceover is not updated for you. The component shows Block text has changed since this voiceover was generated. The audio may no longer match. Choose Regenerate voiceover to bring it up to date, or Dismiss if the change does not affect what is said. Remove voiceover, in the player’s menu, takes the narration off; it is available to administrators.

Voiceovers read the text exactly as written, so spell out abbreviations you want read in full.

Choosing colours in the course builder

Every colour control in the builder opens the same picker:

Brand — shades of your organisation’s brand colour
Neutrals — white, black and greys
Accents — a set of distinct colours, including a green and a red
Transparent — no colour, where the control allows it
A hex field for an exact colour, such as #1F4E79

The picker warns Low contrast when a text colour will be hard to read on the background behind it.

You choose each colour once. Learnient works out the matching colour for learners who use Learnient in dark mode, so there is nothing separate to set.

Colours from Brand follow your branding. A colour typed as a hex code stays exactly as typed, even if your branding changes.

Adding an image to a course

The same Add image window is used wherever a component takes a picture: Image, Quote, Before / after, Image hotspot, and image backgrounds. It opens by itself when you drop an Image onto the canvas.

Screenshot missingadd-image-window

The Add image window opened from an Image component, on the Generate with Lenni tab. The tabs along the top read Upload, Link, Gallery, Generate with Lenni and Stock library. The Style dropdown shows Auto, the Size dropdown shows Widescreen landscape, a prompt has been typed, and the Accessibility description field below it has a description filled in. The footer shows Close and Insert image.

Expected at src/assets/screenshots/guides/course-builder-components/add-image-window.png

Tab	Where the picture comes from
Upload	A file from your computer. JPG, JPEG, PNG, GIF, WEBP or SVG, up to the size shown on screen. A 16:9 shape suits most layouts
Link	An image already on the web. Paste its address and choose Continue
Gallery	Your organisation’s media library, with search, categories and tags. See Managing the media library
Generate with Lenni	A new picture made from a Prompt you write, in a Style such as Professional, Flat illustration or Watercolour (View style examples shows each), at a Size from Square to Wide banner. Choose Generate image. Only where AI image generation is switched on
Stock library	Free photographs from Pexels

Fill in Accessibility description, then choose Insert image. Uploaded and generated pictures are added to your media library, so they can be used again.

Describing images and media for screen readers

Every picture, video and document needs an Accessibility description: a sentence saying what it shows, which screen readers read out to learners who cannot see it. The builder will not insert an image without one, and shows Accessibility description is required until you add it.

Describe what matters for the course, not every detail. “A forklift reversing with its warning light on” is more use than “an image of a warehouse”. Do not start with “Image of”; screen readers already say that.

There is no option to mark a picture as decoration only. If a picture carries no meaning, it may belong in a background instead, which screen readers skip; see Changing the background of a module or page.

To change the description later, select the component and choose Manage. Manage shows the file’s details and its Accessibility description, and for a video its Transcript. It is there for pictures and files from your media library.

Setting the size and alignment of images, videos and documents

Image, Video, Document and Image hotspot share a size and alignment control in their toolbar:

Size: Original size, Full width, 50% Width or 25% Width
Alignment: left, centre or right, for anything narrower than full width

Replace, beside it, swaps the file for another, keeping the component’s settings.

On a phone, anything narrower than full width is shown full width, so learners can see it properly.

The Heading, Subheading and Text components

Heading is the title of a section, Subheading the title of a part within it, and Text is ordinary paragraphs. Use headings to break a page into parts learners can scan: a module that is one long run of text is hard to follow and hard to come back to.

All three use the text toolbar and the background toolbar described above, and all three can have a voiceover. Text also has AI.

Keep headings in order: a Subheading belongs under a Heading. Screen readers let learners jump between headings, so the order is how they find their way around.

The Bulleted list and Numbered list components

Bulleted list is for points in no particular order; Numbered list is for steps or anything where the order matters. Each starts with three items. Press Enter at the end of an item to add another, and Backspace in an empty item to remove it.

They use the same toolbars as Text. For steps that need a title and a description each, Numbered steps is usually clearer.

The Callout component

A Callout is a coloured panel with an icon, for something learners must not miss: a warning, a legal requirement, a tip. Used sparingly it stands out; on every page it stops meaning anything.

Setting	What it does
Background colour	The panel colour
Change icon	The icon on the left, chosen from a grid. Pick one that matches the message: a triangle for a warning, a lightbulb for a tip

The text uses the text toolbar, and can have a voiceover.

The Quote component

A Quote sets out something somebody said, with their name and role, and optionally their photo. Use it for a customer’s words, a leader’s reason for the training, or a colleague’s experience.

Fill in Enter the quote, Name, and Role, company or date. Each has its own text toolbar.

Setting	What it does
Background colour	The colour behind the quote
Manage	Layout: Quote first or Person first; Image shape: Circle or Square
Add image	A photo of the person, through the Add image window. Change image and Remove image once there is one

The Image component

An Image puts a picture on the page. Use it for anything learners need to look at: a diagram, a photo of equipment, a screenshot of a form. See Adding an image to a course for choosing the picture.

As well as size and alignment, an Image has:

Setting	Choices
Corners	Square, Rounded or Very rounded
Shadow	No shadow or Soft shadow
Aspect ratio	Original, or cropped to 21:9, 16:9, 4:3 or 1:1
Tilt	A slight angle, up to three degrees either way

There is no caption. If a picture needs one, put a Text component under it.

The Video component

A Video plays a film in the course, either one you upload or one hosted elsewhere. Use it for demonstrations, messages from leaders, or anything easier to show than describe.

Add video opens when you select an empty Video, with four tabs:

Tab	Where the video comes from
Upload	A file from your computer: mp4, mov, webm, ogg, avi or wmv, up to the size shown. mp4 plays most reliably. A duplicate of something already in your library can be reused rather than uploaded again
Link	A video on YouTube, Vimeo, Loom, Synthesia, Google Drive, Wistia or Vidyard. Paste its address
Gallery	A video already in your media library
Stock library	Free stock footage

Fill in the Accessibility description, and the length in Duration (minutes). Add a Transcript too, either pasted in or with Upload transcript (optional), as an .srt or .txt file with timings. A transcript is what gives learners a written version to read or download, captions on uploaded videos, and lets Lenni find and link to moments in the video. A transcript without timings still helps, but cannot drive captions.

An uploaded video is processed before it will play, shown as Processing video…. If it fails, you see Video processing failed; upload it again.

Learners get a player, a Transcript they can open and download, and captions they can switch on where the video was uploaded with a timed transcript. Videos from YouTube and similar sites use that site’s own captions.

For editing transcripts, see Video and transcripts.

The Document component

A Document puts a file in the course for learners to read or download: a policy, a form, a reference sheet.

Select the empty Document. Add document opens.
Upload a PDF, Word, Excel, PowerPoint, TXT or RTF file, or choose one from Library.
Give it a Display name, which is what learners see.
Choose a Display mode:
- Show inline — the document appears in the page, with page controls, zoom and full screen
- Open in new tab — a card with Open, which opens the file separately

Files other than PDFs are converted to show inline, shown as Converting document…. If it fails, choose Retry upload.

Use Show inline for something learners should read as part of the course, and Open in new tab for something they will keep, print or fill in. Inline, Download original gives learners the file as you uploaded it, where the original is available.

The Before / after component

Before / after puts two pictures on top of each other with a slider between them. Learners drag the slider to compare them. Use it for a workstation set up badly and well, a form filled in wrong and right, or a site before and after a clean-up.

Choose Manage to set up each side: the Before image and After image, a Before label and After label, and Alt text describing each picture. Replace image swaps one. Learners see nothing until both pictures are in, and the pictures are shown in a 16:9 shape, so choose two of the same framing.

Questions in the course builder

The seven components under Assessments are questions. They count towards the course’s score and pass mark, which is covered in Adding questions and scoring to a course. This section covers setting each one up.

Screenshot missingquestion-editing-single-choice

A Single choice question open for editing in the course builder: the question stem filled in, four answers with letter chips A to D, answer B marked correct with Points set to 10, the + Add answer link, the Explanation box filled in, and the Save to question bank switch. The left toolbar shows Edit question and Background colour.

Expected at src/assets/screenshots/guides/course-builder-components/question-editing-single-choice.png

Every question has:

The question itself, at the top
An Explanation, shown to learners once they have answered. Use it to say why the right answer is right: it is where most of the learning in a question happens
Save to question bank, to keep a copy for use in other courses. See Building and reusing a question bank
Edit question and Background colour in its toolbar

If your question bank already has questions of the type you drop, Add question asks whether to Create new question or Choose from bank.

A question with something missing, such as an empty answer or no correct answer, shows This question needs attention, and the course will not save until it is fixed.

Answers appear to learners in the order you write them. Only Drag to match shuffles its items.

The Single choice and Multiple choice questions

Single choice has one right answer; Multiple choice has several, and learners pick all that apply. They start with four answers; + Add answer adds more, up to 26.

Mark the right answer, or answers, with the letter chips. Each right answer has Points, from 5 to 100 in steps of 5. The points are what the question is worth.

The True / False question

True / False is a statement learners judge. Choose which is correct, and set its Points. Write statements that are clearly one or the other; “usually” and “sometimes” make them guesswork.

The Ordering question

Ordering gives learners items to put in the right order, such as the steps of a procedure. Write the items, then drag the letter chips under Arrange the answers in the correct order into the right sequence. Each item has Points, earned for putting it in the right place.

The Drag to match question

Drag to match gives learners Prompts and Items to match, and they drag each item to its prompt: terms to definitions, hazards to controls. Add matching pair adds a pair; there must be at least two. Learners see the items shuffled.

Drag to match has no points of its own and cannot be saved to the question bank.

The Open text question

Open text asks learners to write an answer in their own words. Use it where understanding matters more than recall: explaining what they would do, or why.

Placeholder text — a hint shown in the empty answer box
Min. characters — the shortest answer accepted. Leave it blank for no minimum
Score this question — switch on to have answers marked. Switched off, the question is recorded but not marked

An open text question always needs an answer. With Score this question on, set up how answers are marked:

Setting	What it does
Model answer	A good answer written out in full, shown to whoever reviews the marking. Learners do not have to match it
How marks are awarded	Add up: each point in What earns marks is judged on its own and the marks add up, for answers that must contain certain things. Levels: the answer is placed in one of the Levels, best first, for answers that differ in overall quality
What earns marks	Each thing the answer should show, and its marks. Describe what learners must show, not the words they must use. Add criterion adds another. A criterion with negative marks Loses marks when present
Pass mark	Optional. Marks at or above this count the question as correct
Learner feedback	Show the breakdown to the learner lets learners see how their answer was marked against each point
Marking guidance	Notes on how to mark, such as “accept any reasonable phrasing”

Answers are marked automatically against these criteria, and you can change any mark from the course’s Submissions tab. See Marking an open-text answer.

The Practice scenario component

A Practice scenario is a conversation learners hold with an AI character, such as an unhappy customer or a team member who is under-performing, to practise a difficult conversation before they have it for real. At the end they get feedback against the success criteria you set.

Setting one up opens Practice scenario, a four-step window. Reopen it later with Manage.

Scenario — a Title, a description, the Scenario type (such as Difficult conversation or Customer complaint), the Difficulty, and the Learner context: the briefing learners read first.
Character — who learners talk to: Character name, Role / relationship, Tenure, Communication style, Emotional starting state and the Opening line. Choose a Personality preset, or Customise personality to set it yourself. This character has a hidden backstory gives the character something learners only uncover by handling the conversation well, in up to three stages, each saying what it Reveals and what it is Earned by.
Success criteria — three to five things learners should do, each with a Label and what success looks like. Generate suggested criteria drafts some for you.
Review & test — a summary, and Try this scenario to hold the conversation yourself before learners do.

Choose Confirm to finish. Try it every time you change it: the character is only as convincing as its set-up.

Screenshot missingpractice-scenario-character

The Practice scenario window on the Character step, with the four steps Scenario, Character, Success criteria and Review & test across the top. Character name, Role / relationship, Tenure, Communication style, Emotional starting state and Opening line are filled in, a Personality preset is selected, and This character has a hidden backstory is switched on showing one stage with Reveals and Earned by.

Expected at src/assets/screenshots/guides/course-builder-components/practice-scenario-character.png

The Divider and Spacer components

A Divider is a horizontal line between sections. Set its Colour, its thickness (Thin line, Medium line or Thick line) and its style (Solid line or Dashed line).

A Spacer is empty space, from 10 to 300 pixels, for when components sit too close together. It shows its height in the builder, such as Spacer (30px), and nothing to learners.

The Page break component

A Page break splits a module into pages, so learners see one screen at a time rather than one long page. Learners do not see the break itself. It carries the page’s name and background. See Splitting a module into pages and Giving one page its own background.

This page will scroll for most learners. under a page means it is too long to fit on most screens. That is allowed, but consider splitting it.

The Table component

A Table sets out information in rows and columns: a comparison, a schedule, a list of contacts. It starts with two rows and two columns.

Click a cell to type in it
Add row and Add column, the + buttons at the bottom and right, add more
Click the thin bar beside a row or above a column to select it, and hold Shift to select several. Then Duplicate selected rows or Delete selected rows (or columns), after Confirm deletion
Selected cells have their own toolbar for colour, bold, italic, underline, strikethrough, size, font and alignment
The toolbar also sets the table’s background colour

There is no heading row, and cells cannot be merged or resized. To make the first row stand out, make it bold and give it a colour.

The Accordion component

An Accordion is a list of headings that open to show what is under them. Use it for reference material learners dip into, such as frequently asked questions, so the page is not one long scroll. Do not hide anything in an accordion that every learner must read.

Each item has two parts, each filled by dragging components into it:

The heading: drag a Heading or Subheading into Drag a heading or subheading here.
The content: drag anything else into Drag content components here, except columns, another accordion or a page break.

It starts with four items. Add accordion item adds another, Drag to reorder accordion item moves one, and Delete accordion item removes one and everything in it. The last item cannot be deleted. Change header background colour colours the heading bars.

Learners can have several items open at once.

The Code block component

A Code block shows computer code or anything else that must be copied exactly, such as a command or a formula, in a fixed-width font with a copy button for learners. Type or paste it in. Format code tidies the layout of JSON, HTML, CSS or JavaScript.

The Stat card component

A Stat card makes one number stand out: “92% of incidents are reported within an hour”. It has three parts: a Label above, the Value in large type, and a line of body text below.

Its settings are shared with CTA block and Hero title:

Setting	What it does
Background colour	A colour, pattern, gradient or image behind the card, with the same choices as a module background. Full bleed stretches the background to the edges of the page while the text stays in line with the rest
Padding	The space inside the card
Show or hide a part	Hides a part you do not need, such as the label

The CTA block component

A CTA block, short for call to action, is a panel that asks learners to do something next: “Ready to apply this?”, with a sentence and a button. It has a title, content and a button, and the same settings as Stat card, plus Button background for the button’s colour.

Linking the button on a CTA block or Hero title

The button takes learners to a web address you choose, such as a form, a policy or another course.

Select the component and choose Button link in its toolbar.
Paste the address into Paste link here. An address without https:// is fine; it is added for you.
Leave Open in new tab ticked so learners keep their place in the course, and choose Apply.

Learners only see the button once it has a link. Until then you still see it in the builder, and Button link carries a small dot and says there is none yet. Remove link takes the link off, which hides the button from learners again. An address that is not a web page, an email or a phone number is refused with That is not a valid web address.

The Hero title component

A Hero title is a large title panel for the start of a module or page, with a title, a line of content and an optional button, over a background. It has the same settings as CTA block, including Button link; see Linking the button on a CTA block or Hero title. Pair it with a background image or pattern to open a module strongly.

The Tags component

Tags shows a row of coloured labels, such as the topics a module covers or the roles it applies to. Learners see them and cannot select them.

Choose Click to add your first tag, or Add new tag in the toolbar.
Type a label, up to 60 characters, and choose its colour: Blue, Green, Red, Yellow, Orange, Purple, Pink or Grey.
Click a tag to change it.

Manage lists every tag, where you can Drag to reorder, delete one or Delete all tags, paste several at once separated by commas or new lines, and Apply colour to all tags. The toolbar also has Background colour, a pattern and Padding.

The Feature card component

A Feature card is a single card with an icon, a small label above the title, a title and a sentence or two. Use a row of them in columns to set out three or four ideas side by side.

Setting	What it does
Change icon	The icon at the top
Icon colour	Its colour
Background colour	The card colour
Surface	Raised gives the card a shadow; Flat gives it a thin outline instead
Padding	The space inside the card

The Numbered steps component

Numbered steps sets out a process as numbered steps, each with a title and a description. Use it for procedures learners follow in order.

Choose Manage to write the steps. Add step adds one, and Move step up and Move step down change the order. Under All step titles and All step text you can set the font, size, weight and Text colour of every step at once.

The toolbar has Accent colour for the numbers, Background colour, Columns (One column, Two columns or Three columns), the number style (Circle or a large numeral) and Padding. The number style otherwise follows the course’s design style.

The Timeline, Tabs, Process flow and Key takeaways components

These four are set up the same way: choose Manage to write the items, with Add item, Remove item and the arrows to reorder. Each has Accent colour, Background colour and Padding in its toolbar.

Component	What it is for	Each item has
Timeline	Events in date order, such as the history of a policy or the stages of a project. Choose Vertical or Horizontal	When, a title and a description
Tabs	Related content learners switch between, such as the same rule for different sites, without it all being on the page at once	A label and its content
Process flow	A process drawn as numbered steps joined by arrows. Keep each step short	A label and an optional description
Key takeaways	A ticked summary list, usually at the end of a module. It has its own Heading	One point to remember

Tabs and Process flow need at least two items; Timeline and Key takeaways need one.

The Stepped reveal component

A Stepped reveal shows content one step at a time. Learners choose a button to see the next step, so they take each one in before moving on. Use it for a worked example or a story told in stages.

Choose Manage to write the steps, each with a title and content, and to reorder or delete them. The same panel sets:

Button label — the button that shows the next step, Next unless you change it
Reset label — the button at the end that starts again
Show progress indicator — a bar showing how far through they are

More than eight steps starts to feel slow, and the panel says so.

For revealing whole components one click at a time, rather than steps within one component, use Animation mode; see Revealing content click by click with Animation mode.

The Flip card component

A Flip card has a question or term on the front and the answer on the back. Learners click to flip it. Use it for definitions, quick self-checks or before-you-look questions.

Type the front’s title and text, then choose Show back to write the back, and Show front to return. Manage sets:

Setting	What it does
Flip motion	The Axis (Horizontal (left–right) or Vertical (up–down)), how long the flip takes (Short, Medium or Long) and its Easing (Smooth, Snappy or Soft). Learners who have asked their device for less motion get a simple change instead
Front face	An Eyebrow, a short label above the term, and the Front background
Card height	The height in pixels. Make it tall enough for the longer side

The Image hotspot component

An Image hotspot is a picture with numbered markers on it. Learners select a marker to read what is at that spot. Use it to label equipment, explain a floor plan, or point out the hazards in a photograph.

Choose the picture. The Add image window opens when you drop the component.
Choose Manage, then Click to add new markers, and click the picture wherever a marker should go. Drag a marker to move it. Choose Done when you have placed them.
Open each marker in the list to give it a Marker title, a description, and where its pop-up appears.

A picture can have up to 12 markers. The toolbar has size, alignment, Manage and Replace.

Screenshot missingimage-hotspot-markers

An Image hotspot component with a photograph of a workshop and four numbered markers placed on it. The Manage panel is open beside it listing Markers (4 / 12), with the second marker expanded to show its Marker title, description and pop-up position.

Expected at src/assets/screenshots/guides/course-builder-components/image-hotspot-markers.png

The column layouts

The six components under Layout put components side by side. One column, Two columns, Three columns and Four columns are equal widths; 1+2 columns and 2+1 columns put a narrow column beside one twice as wide, which suits a picture beside its text.

Drag components into Drop components here in each column. Anything can go in a column except another set of columns, an accordion or a page break. Choose the layout carefully, because the number of columns cannot be changed once it is on the page.

Column backgrounds, in the toolbar, styles the layout:

Element — the background behind the whole row, with the same choices as a module background
Full bleed — stretches the row’s background to the edges of the page
Overhang — pulls the row up over the one above it
For each Column, its own background colour, pattern and padding, a Surface (Flat, Raised or Frosted), an Offset to nudge it Across or Down, and an Eyebrow label above its content

On a phone, columns stack one above the other; on a tablet, four columns become two. Check the order in Preview on Mobile: the left-hand column comes first.

Deleting a layout that has components in its columns asks Delete column layout? first, because it deletes those components too; choose Delete layout and blocks to go ahead. An empty layout is deleted straight away.

Common questions

How do I add a caption to an image?

There is no caption setting. Put a Text component directly under the image, and use 2+1 columns if you want the caption beside it.

Why can I not drop a question on the cover page?

Questions need to be inside a module to be marked. The cover and closing page take information components only.

Why can my learners not see the button on a CTA block?

The button has no link yet. Learners only see a CTA block or Hero title button once it has one; add it with Button link.

Can I add an audio file to a course?

Not as a file. Use a voiceover on a text component, or a Video for recorded audio with pictures.

Why can I not move a component out of a column?

Components inside columns and accordions only move within them. Delete it and drop a new one where you want it.

AI is on Text components only, where AI features are switched on for your organisation.