> 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/content-designers/about-layout-builder/block-layout/block-styles.md).

# Block Styles

Block styles allow you to apply visual customizations to individual blocks within Layout Builder. These styles control how a block looks, independently of the section styles that affect the overall container.

## Accessing Block Styles

1. In the Layout Builder interface, click on the block you want to style.
2. Select **Configure** or **Style** from the contextual menu.
3. Look for the style settings within the block configuration panel.
4. Adjust the available style options.
5. Click **Update** to apply the styles.

## Available Style Options

The specific style options depend on your site's theme and configuration. Common block-level style options include:

### Background

* Apply a background color to an individual block.
* Choose from predefined colors that align with your site's design system.

### Spacing

* **Padding**: Adjust the inner spacing between the block's border and its content.
* **Margin**: Adjust the outer spacing between the block and surrounding blocks.

### Text Styles

* **Text alignment**: Set text alignment to left, center, or right.
* **Text color**: Choose a text color (typically from a predefined palette).

### Border and Shadow

* **Border**: Add or configure a border around the block.
* **Border radius**: Round the corners of the block.
* **Box shadow**: Apply a shadow effect for visual depth.

### Display Options

* **Visibility**: Control whether the block title is displayed or hidden.
* **Animation**: Some themes offer entrance animations for blocks (e.g., fade-in, slide-up).

## How Block Styles Differ from Section Styles

* **Section styles** affect the entire row (section) and all blocks within it. They control the overall container appearance.
* **Block styles** affect only the individual block they are applied to. They allow you to differentiate specific blocks within a section.

You can combine both section and block styles. For example, a section might have a dark background, while individual blocks within it have different accent colors or spacing.

## Tips

* **Maintain consistency.** Apply similar styles to blocks of the same type across your site for a cohesive visual design.
* **Use sparingly.** Over-styling individual blocks can create a cluttered appearance. Let the site's theme handle most of the visual design.
* **Follow your design system.** Use predefined colors and spacing values to stay within your site's brand guidelines.
* **Test across devices.** Preview styled blocks on different screen sizes to ensure they look appropriate on mobile, tablet, and desktop.
* **Work with your team.** If you need style options that are not available, coordinate with your development team to extend the block style configuration.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.varbase.vardot.com/content-designers/about-layout-builder/block-layout/block-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.