# 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.