# Contents

**Contents** creates a navigable course structure that displays chapters, pages, quizzes, and other learning elements in a hierarchical format.

## Style settings

<table><thead><tr><th width="236">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Icons</strong></td><td></td></tr><tr><td>"Chapter" Icon</td><td>Upload or select a custom icon to represent chapter-level elements in the contents structure</td></tr><tr><td>"Page" Icon</td><td>Upload or select a custom icon to represent individual content pages</td></tr><tr><td>"Quiz" Icon</td><td>Upload or select a custom icon to represent quiz or assessment sections</td></tr><tr><td><strong>Section</strong></td><td></td></tr><tr><td>Hovered</td><td>Define the color that appears when users hover over section items in the contents list</td></tr><tr><td>Disabled</td><td>Set the color for content sections that are not yet available to learners</td></tr><tr><td><strong>Progress</strong></td><td></td></tr><tr><td>Progress line (background)</td><td>Set the color for the progress tracking line in its incomplete state</td></tr><tr><td>Progress line (completed)</td><td>Define the color that shows completed portions of the learning progress</td></tr><tr><td>Display border</td><td>Toggle border visibility around the contents component (Yes/No)</td></tr><tr><td>Border color</td><td>Set the color for the border around the contents area</td></tr><tr><td>Thickness</td><td>Adjust border thickness of the contents container</td></tr><tr><td><strong>Margins</strong></td><td></td></tr><tr><td>Margin from icon</td><td>Set the spacing between icons and text labels in the contents list</td></tr><tr><td>Margin between sections</td><td>Define the vertical spacing between different sections in the contents list</td></tr><tr><td>Margin from progress bar</td><td>Set the distance between the progress indicator and content items</td></tr><tr><td>Margin from collapse</td><td>Adjust the spacing from collapse/expand controls</td></tr><tr><td><strong>Collapse</strong></td><td></td></tr><tr><td>"Collapsed" icon</td><td>Upload or select a custom icon to indicate collapsed sections</td></tr><tr><td>"Expanded" icon</td><td>Upload or select a custom icon to indicate expanded sections</td></tr></tbody></table>

## Typography settings

The **Typography** tab provides options for customizing font, style, size, line spacing, and color for the following components:

* Chapter
* Section
* Description

For details, see [Typography and fonts](https://help.parta.io/branding/create-branding/typography-and-fonts).