> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Courses

> How members browse courses and view course content, lessons, and enrollment information.

The courses section lets you offer structured learning content — multi-lesson programmes that members can enrol in and track their progress through.

<Frame>
  <img src="https://mintcdn.com/nexudus/z74R4-YftVrf9Ylz/images/member-portal/courses-list.png?fit=max&auto=format&n=z74R4-YftVrf9Ylz&q=85&s=a24f97ab4118fddd81bed59e00357a6f" alt="Courses listing page" width="2560" height="3656" data-path="images/member-portal/courses-list.png" />
</Frame>

## Courses listing page

The listing page displays all published courses in a card grid with filtering.

### What each card shows

* **Course title and description**
* **Course image**
* **Instructor / host name**
* **Lesson count**
* **Category tag**

### Filtering & search

| Filter       | What it does                                          |
| ------------ | ----------------------------------------------------- |
| **Category** | Dropdown to filter courses by their assigned category |
| **Search**   | Free-text search across course titles and content     |

Pagination loads 9 courses per page with previous/next navigation.

### Featured courses

On the first page, a **Featured Courses** section highlights courses marked as featured in the dashboard.

***

## Course details page

Clicking a course card opens the full details view.

<Frame>
  <img src="https://mintcdn.com/nexudus/z74R4-YftVrf9Ylz/images/member-portal/course-details.png?fit=max&auto=format&n=z74R4-YftVrf9Ylz&q=85&s=1277853a12534384ad049029a6635ce5" alt="Course details page" width="2560" height="5018" data-path="images/member-portal/course-details.png" />
</Frame>

### Information displayed

* **Course title and hero image**
* **Instructor / host name**
* **Full description** rendered from markdown
* **Overview text**
* **Pricing** — the course tariff displayed in the location's currency
* **Lesson count**

### Lessons

The course curriculum is displayed as expandable panels — one per lesson. Each panel shows:

* **Lesson number and title**
* **Lesson summary** (markdown formatted)

Members can expand and collapse individual lessons to browse the syllabus before enrolling.

### Supported HTML formatting in course and lesson content

Course descriptions and lesson content support rich HTML formatting. When creating or editing course or lesson content, you can use the following HTML elements and attributes:

#### Allowed HTML tags

Basic text formatting: `<p>`, `<br>`, `<strong>`, `<b>`, `<em>`, `<i>`, `<u>`, `<s>`, `<code>`, `<pre>`, `<h1>` – `<h6>`, `<blockquote>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`, `<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>`, `<hr>`, `<div>`, `<span>`

Rich media: `<a>`, `<img>`, `<video>`, `<iframe>`

#### Allowed attributes

**Links** (`<a>`): `href`, `title`, `target`, `rel`

**Images** (`<img>`): `src`, `alt`, `title`, `width`, `height`, `style`

**Videos** (`<video>`): Standard HTML5 video attributes

**Embedded content** (`<iframe>`): `src`, `width`, `height`, `allow`, `frameborder`, `allowfullscreen`, `style` (YouTube videos are supported)

***

### Enrollment

An **Enrol** button allows members to start the checkout flow for the course.

***

## Recommended image sizes

Courses use two images: a **large image** and a **small image**. Each is requested at different sizes depending on context.

### Large image

| Where it appears             | Requested size | Aspect ratio |
| ---------------------------- | -------------- | ------------ |
| **Detail page hero**         | 1280 × 520 px  | \~2.46 : 1   |
| **Featured courses section** | 1280 × 520 px  | \~2.46 : 1   |
| **Checkout detail**          | 800 × 300 px   | \~2.67 : 1   |

### Small image

| Where it appears            | Requested size | Aspect ratio |
| --------------------------- | -------------- | ------------ |
| **Listing cards**           | 600 × 540 px   | \~1.11 : 1   |
| **Featured section (grid)** | 600 × 540 px   | \~1.11 : 1   |
| **Student course home**     | 600 × 540 px   | \~1.11 : 1   |
| **Completion page**         | 600 × 540 px   | \~1.11 : 1   |
| **Basket thumbnail**        | 220 × 220 px   | 1 : 1        |

<Tip>
  For the best results, upload a **large image** of at least **1280 × 520 px** (landscape, \~2.5:1 ratio) and a **small image** of at least **600 × 540 px** (nearly square). The large image is used as the hero and in checkout — a wider aspect ratio works best. The small image appears in card grids and should look good when cropped close to square.
</Tip>