> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/inhalt-content/trennlinien-divider.md).

# Divider

The element is used to create visual **separations between different content sections** on your website. These simple yet effective dividers help improve readability and create a clear structure on the page. Dividers can be used in various styles and designs.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FpGiugZQoyKtwAapPgxZf%2FBildschirmfoto%202024-10-07%20um%2022.03.43.png?alt=media&amp;token=232ac115-bf27-4414-ae6e-8858949b3ca9" alt=""><figcaption></figcaption></figure>

### General Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FxTZ0TnQnJ6P0AOflfrag%2FBildschirmfoto%202024-10-07%20um%2022.04.34.png?alt=media&amp;token=b9503387-e0e2-42df-9ac9-37d59abc934d" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="252">Function</th><th>Description</th></tr></thead><tbody><tr><td>Divider Type (1)</td><td>The line type of the divider. Either <strong>solid</strong>, <strong>dotted</strong>, <strong>dashed</strong>, or <strong>double</strong>.</td></tr><tr><td>Divider Content (2)</td><td>Here you can choose whether to set a <strong>heading</strong>, an <strong>icon</strong>, or <strong>nothing</strong> with the line.<br><br><a data-mention href="/cms-bundle/en/elemente/konfigurationsbausteine/icon.md">Icon</a></td></tr><tr><td>Heading (3)</td><td>Set the heading that will be displayed together with the lines of the divider.</td></tr></tbody></table>

### Layout Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fd0NWdKy4TL4xpGHBMavK%2FBildschirmfoto%202024-10-07%20um%2022.05.30.png?alt=media&amp;token=171ce6c7-f792-46bf-84cb-e800ce317bb4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="252">Function</th><th>Description</th></tr></thead><tbody><tr><td>Divider Color (1)</td><td>Set the general color here</td></tr><tr><td>Divider Width (2)</td><td>Here you can set the width of the entire element</td></tr><tr><td>Divider Height (3)</td><td>This determines the thickness of the lines</td></tr><tr><td>Vertical Alignment (4)</td><td>This function comes into play when the divider is placed next to another element</td></tr><tr><td>Horizontal Alignment (5)</td><td>Here you determine how the <strong>icon</strong> or the <strong>heading</strong> interacts with the lines.</td></tr></tbody></table>

### SEO Settings

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/en/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}