> 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.0.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://1551857219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8dBDWQAT3IcHFm6Y1A3%2Fuploads%2Fadr2Anz8wjC6uH1U2kZ3%2Fimage.png?alt=media&amp;token=531c717f-dcb2-4171-93af-43e91a5b1100" 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://1551857219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8dBDWQAT3IcHFm6Y1A3%2Fuploads%2FZVSM32u4snXk1WMKdlNM%2Fimage.png?alt=media&amp;token=92b0aa05-00d0-4f0b-8248-8300cd90e362" 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://1551857219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8dBDWQAT3IcHFm6Y1A3%2Fuploads%2F44OREzqGbYp3sXuloMFD%2Fimage.png?alt=media&amp;token=aae00abc-9b4a-4283-bece-cea9b0342b5b" 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://1551857219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8dBDWQAT3IcHFm6Y1A3%2Fuploads%2FCOcJ0AhZyufrm3RgXT5E%2Fimage.png?alt=media&amp;token=5be8c46d-f182-4c95-8923-768a9a9afa55" 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://1551857219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8dBDWQAT3IcHFm6Y1A3%2Fuploads%2FcsTIOHu9lvkaoMxnbAF2%2Fimage.png?alt=media&amp;token=8b4fb515-199c-4e90-833a-f1bd908d7af7" 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://1551857219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8dBDWQAT3IcHFm6Y1A3%2Fuploads%2Fq3Hjl77X9196JwTmT5Mc%2Fimage.png?alt=media&amp;token=cd695524-c519-4fca-b7dc-bccb40c354e6" alt=""><figcaption><p>Section Shadow Style</p></figcaption></figure>

### Animation:

Users can control the animation that the section will display.

<figure><img src="https://1551857219-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fd8dBDWQAT3IcHFm6Y1A3%2Fuploads%2Fqp1s48Iq0mYDM5MuSM3c%2Fimage.png?alt=media&amp;token=2d0ce201-b963-4d0d-b59a-ba52b710c9cc" alt=""><figcaption><p>Section Animation Style</p></figcaption></figure>
