# Grouping

**Grouping** creates interactive categorization tasks for courses. Use it to design engaging exercises that improve comprehension, help learners recognize patterns, and demonstrate how different elements connect within your subject matter.

## Style settings

<table><thead><tr><th width="230">Property</th><th>Description</th></tr></thead><tbody><tr><td><strong>Group</strong></td><td></td></tr><tr><td>Background color</td><td>Set the background color for group containers</td></tr><tr><td>Rounding</td><td>Adjust corner radius of group containers</td></tr><tr><td>Border color</td><td>Define the color for group container borders</td></tr><tr><td>Thickness</td><td>Set border thickness for group containers</td></tr><tr><td><strong>Answer</strong></td><td></td></tr><tr><td>Background color</td><td>Set the background color for answer elements</td></tr><tr><td>Rounding</td><td>Adjust corner radius of answer elements</td></tr><tr><td>Display border</td><td>Toggle border visibility around answer elements (Yes/No)</td></tr><tr><td>Border color</td><td>Define the color for answer element borders</td></tr><tr><td>Thickness</td><td>Set border thickness for answer elements</td></tr><tr><td><strong>Icon</strong></td><td></td></tr><tr><td>Answer icon upload</td><td>Upload a custom icon for answer elements</td></tr><tr><td>Icon color</td><td>Set the color for icons within answer elements</td></tr><tr><td>Background color</td><td>Define the background color for icon containers</td></tr><tr><td>Hover color</td><td>Set the color that appears when users hover over icons</td></tr><tr><td><strong>Progress bar</strong></td><td></td></tr><tr><td>Rounding</td><td>Adjust corner radius of progress indicators</td></tr><tr><td>Progress line (completed)</td><td>Set the color for completed progress portions</td></tr><tr><td>Progress line (background)</td><td>Define the color for unfilled progress portions</td></tr><tr><td>Height</td><td>Set the height of progress indicators</td></tr><tr><td><strong>Effects</strong></td><td></td></tr><tr><td>Group shadow</td><td><p>Add and configure shadow effects for group containers:</p><ol><li>Click the "+" icon to add shadow effects.</li><li>Select from shadow styles: None, Soft, Regular, or Retro.</li></ol></td></tr><tr><td>Answer shadow</td><td><p>Add and configure shadow effects for answer elements:</p><ol><li>Click the "+" icon to add shadow effects.</li><li>Select from shadow styles: None, Soft, Regular, or Retro.</li></ol></td></tr><tr><td><strong>Margins</strong></td><td></td></tr><tr><td>Card paddings</td><td>Set internal spacing for cards (top, right, bottom, left)</td></tr><tr><td>Margin from answers</td><td>Define spacing between group containers and their answer elements</td></tr><tr><td>Margin between groups</td><td>Set spacing between different group containers</td></tr></tbody></table>

## Typography settings

Customize Grouping appearance using rich-text formatting options. These changes apply only to the Answer and Result within the Grouping element and do not affect other text elements.

You can modify the following properties:

* Font
* Style
* Size
* Line spacing
* Color

For details on how to configure parameters in rich-text options, see [Typography and fonts](../typography-and-fonts).
