> For the complete documentation index, see [llms.txt](https://rosea.gitbook.io/monocolor/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rosea.gitbook.io/monocolor/ui-kit/course-layout.md).

# Course Layout

## Available layouts

<table data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><em>Layout #1</em></td><td><a href="/pages/3HBXDiZOxH0hPZFT5gAV"><strong>Standard View</strong></a></td></tr><tr><td><em>Layout #2</em></td><td><a href="/pages/tWcqUllppqdp4kgqjsj3"><strong>Tab Layout</strong></a></td></tr></tbody></table>

## Available options

### Hide Course Index Navigation

<figure><img src="/files/Otaow6bbS8PxDIQmV435" alt=""><figcaption></figcaption></figure>

### Display teachers section

Display the teachers' section **on the main course page.**

<figure><img src="/files/fdztDdE2ZUuknplthgGj" alt=""><figcaption></figcaption></figure>

### Display course summary (Course Index Page)

1. Custom width of the Course Description Wrapper (First Tab)\
   -> *If empty then the container will be full width.*
2. Custom width of the Course Description Wrapper (Course subpages)\
   -> *If empty then the container will be full width.*

<figure><img src="/files/i5FRJMHLUzeOtqGb2OGR" alt=""><figcaption></figcaption></figure>

### Display course details (Course Index Page)

<figure><img src="/files/ja4yfKm3q13Qce0kucXp" alt=""><figcaption></figcaption></figure>

### Display course image (Course Index Page)

<figure><img src="/files/kYziuL6hDZ2LXNZ9DYXO" alt=""><figcaption></figcaption></figure>

### Display Course Progress Bar

Course progress bar displays on the course index sidebar

<figure><img src="/files/1CZq4f1UpXtTiSwcrXci" alt=""><figcaption></figcaption></figure>

### Activity Icons

Customize activity icon colors.\
Add a custom CSS (Advanced - Raw SCSS) to change the icon color from black to white.

{% code overflow="wrap" lineNumbers="true" %}

```css
.activityiconcontainer .activityicon,
.activityiconcontainer .icon {
    filter: invert(1);
}
```

{% endcode %}

<figure><img src="/files/IgFjGf4ChacKo1a5Br0w" alt=""><figcaption></figcaption></figure>