> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mauvely.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Blocks
> The full Compose block catalogue, the settings every block shares, and a reference for the seven content block types.
A block is one piece of content in a lesson. You build a lesson by stacking blocks, and configure
each one in the **Inspector** on the right.
## Adding a block
Three ways:
* The **Blocks** tab in the left panel (`Ctrl` `2`) — the full catalogue, with search.
* The **Insert** menu in the title bar — the same catalogue, grouped by category.
* The inline inserter on the canvas — a short list of quick picks: Text, Image, Multiple choice,
Flashcards, Matching, Custom code.
By default the newly inserted block is selected so you can start editing it immediately; turn that
off in **Settings ▸ Editing**.
## The catalogue
| Block | What it is |
| ------------- | ---------------------------------------------------------------------------- |
| **Text** | A heading and a body paragraph. The block title is the heading. |
| **Rich text** | Markdown with headings, lists and links, formatted from a selection toolbar. |
| **Image** | A picture with a caption and alt text. |
| **Video** | A video file with playback controls. |
| **Audio** | An audio file with playback controls. |
| **Freeform** | A canvas where you place text, boxes and images wherever you like. |
| **3D model** | A model learners can orbit, zoom and spin. OBJ and STL. |
| Block | What it is |
| --------------------- | -------------------------------------------------------------- |
| **Multiple choice** | A question with answers, one or more correct. |
| **Fill in the blank** | A sentence with words removed for the learner to type. |
| **Drag & drop** | Drag items into the category they belong to. |
| **Matching** | Pair items on the left with items on the right. |
| **Hotspots** | Clickable points on an image, each revealing a label and body. |
| **Flashcards** | Cards with a front and a back, flipped by the learner. |
| **Branching** | A scenario of decisions, each with feedback. |
| **Interactive video** | A video that pauses at set times to show a note. |
| **Timeline** | A sequence of dated or ordered entries. |
| **Accordion** | Collapsible sections the learner expands. |
[Full reference for these →](/compose/interactive-blocks)
| Block | What it is |
| --------------- | ----------------------------------------------------------- |
| **Custom code** | Your own HTML, CSS and JavaScript, sandboxed in the export. |
[Full reference →](/compose/custom-code)
## Settings every block shares
Shown in the Outline so you can find the block again. On a **Text** block it is also the
heading learners see.
Overrides the course's content width for this one block:
| Setting | Result |
| ------- | ----------------------------------------------------------------------- |
| Normal | The course content width (narrow 620 px, normal 760 px, or wide 900 px) |
| Wide | Up to 960 px |
| Full | No maximum — spans the available width |
Use **Wide** or **Full** for a wide diagram or a code sample that wraps badly at the text
measure.
Adjacent blocks sharing a group render as one seamless bordered field. Select several blocks,
then **Edit ▸ Group blocks**. Whether the border is drawn at all is set course-wide in the
Design tab.
On an interactive block, **Required** means the learner cannot move to the next lesson until
they have completed it — and it is what SCORM course completion is measured against.
Required has no effect on non-interactive blocks.
## The content blocks in detail
### Text
A heading (the block title) and a body. The simplest block, and the one most lessons are mostly
made of.
### Rich text
Markdown, with a formatting toolbar that appears over a selection. Supports headings, lists,
emphasis, links and inline code. Use it when a paragraph needs structure; use **Text** when it does
not.
### Image
Accepts PNG, JPEG, WebP, BMP, GIF and SVG. The file is embedded in the `.course`, so the course
stays one portable file.
| Setting | What it does |
| ------------- | ---------------------------------------------------------------------------- |
| **Caption** | Text shown under the image |
| **Alt text** | Read by screen readers. Compose warns in the status strip when it is missing |
| **Fit** | *Fit* shows the whole image; *Fill* crops it to fill the frame |
| **Height** | A fixed display height in pixels, or natural height |
| **Alignment** | Centre, left or right |
Alt text is not optional if anyone using a screen reader will take the course. Compose flags
every image that lacks it, but it will still export.
### Video and Audio
Video accepts common web formats; audio accepts MP3, OGG, WAV, M4A and FLAC. Both are embedded in
the `.course` file and staged into the exported package.
Media is embedded, so a course with a lot of video produces a large `.course` file and a large
export. If your LMS caps package size, keep long video hosted elsewhere and link to it from a
Rich text block.
### Freeform
A canvas — 960 × 540 by default — where you place text, coloured boxes and images at any position.
Positions are stored as proportions of that design space, so the layout scales to any screen width
rather than breaking.
Text inside a freeform block renders at a fixed size; the boxes scale, the type does not. This is
deliberate — scaling type down with the canvas makes it unreadable on a phone.
### 3D model
Accepts **OBJ** and **STL** files. In the exported course, learners get a real WebGL viewer they
can orbit, zoom and pan, with optional auto-spin.
The editor canvas shows a placeholder card for a 3D block rather than a live viewer. Use
**Preview** to see the real thing — the preview runs the actual exported course.