> For the complete documentation index, see [llms.txt](https://docs.varbase.vardot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.varbase.vardot.com/10.1.x/content-designers/about-layout-builder/section/section-styles.md).

# Section Styles

Users can control the section style, background, borders, alignment, etc easily with Drupal while **adding** or **editing** the section as the following:

### Background:

Users may add the section background as:

1. Color.
2. Image.
3. Video

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/sD0IYlc5k1jOWUIL8zG3/image.png" alt=""><figcaption><p>Section Background Style</p></figcaption></figure>

Users also can control the background to fit the section width or edge-to-edge by clicking on the **Edge to Edge Background** checkbox.

### Typography:

Users can control the text color and alignment in the section.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/4aN2g1Ddn2fdBjci7eQB/image.png" alt=""><figcaption><p>Section Typography Style</p></figcaption></figure>

### Spacing:

Users can control the section padding (inner space of the section) and margin (whitespace available surrounding the section)

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/DtRQl4H8NMdzvkPoOZqQ/image.png" alt=""><figcaption><p>Section Spacing Style</p></figcaption></figure>

### Blocks alignment:

Users can control the horizontal and vertical alignment of the blocks inside the section.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/lx7ll81lJrril2Xipvco/image.png" alt=""><figcaption><p>Section Blocks Alignment Style</p></figcaption></figure>

### Border:

Users can control the borders (full/specific edge) by choosing the border style, width, color, and radius.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/IG3EgjlNqUy8sezYoSER/image.png" alt=""><figcaption><p>Section Border Style</p></figcaption></figure>

### Shadow:

Users can control the section shadow type and have the ability to preview the option they choose.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/4dVXtvZAHbRhyE7me8Xd/image.png" alt=""><figcaption><p>Section Shadow Style</p></figcaption></figure>

### Animation:

Users can control the animation that the section will display.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/wyi3KXzP3ClkUbgz4xud/image.png" alt=""><figcaption><p>Section Animation Style</p></figcaption></figure>
