> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/product/docs/the-visual-builder/panels/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Panels

> Documentation for Makeswift — the composable visual page builder for marketing teams and developers

## Docs

- [Width](https://docs.makeswift.com/product/docs/the-visual-builder/panels/width.md): The width panel makes it easy to adjust the width of elements on your pages. With intuitive handles and inputs, you can quickly set exact pixel widths or percentages to get your layout just right.
- [Margin](https://docs.makeswift.com/product/docs/the-visual-builder/panels/margin.md): Margin is the space between elements, similarly to [padding](/product/docs/the-visual-builder/panels/padding) it allows you to create spacing around elements, ensuring proper alignment, readability, and visual balance within a layout.
- [Padding](https://docs.makeswift.com/product/docs/the-visual-builder/panels/padding.md): Padding is the space created between a box's border and its contents. This differs from margin which is used to push elements away from each other.
- [Align items](https://docs.makeswift.com/product/docs/the-visual-builder/panels/alignment.md): Align items controls the vertical alignment of elements within a box. It ensures that elements are properly aligned, whether at the top, middle, or bottom, providing a balanced and aesthetically pleasing layout.
- [Backgrounds](https://docs.makeswift.com/product/docs/the-visual-builder/panels/backgrounds.md): The backgrounds panel allows you to add color or media behind content inside of a box. This can be used to create visual interest, separate content, or add depth to your design.
- [Corners](https://docs.makeswift.com/product/docs/the-visual-builder/panels/corners.md): Corners, or border radius, is used to create rounded corners on elements by defining the radius of the element's corners.
- [Border](https://docs.makeswift.com/product/docs/the-visual-builder/panels/borders.md): Border is used to define the boundary around an element, providing visual separation and emphasis within a page.
- [Animations](https://docs.makeswift.com/product/docs/the-visual-builder/panels/animations.md): Animations add dynamic movement to your pages, enhancing the user experience.
- [Gap](https://docs.makeswift.com/product/docs/the-visual-builder/panels/gap.md): The gap controls allow you to easily adjust the spacing between elements within a box.
- [Shadows](https://docs.makeswift.com/product/docs/the-visual-builder/panels/shadows.md): Boxes can have shadows to give them a more real-world, dimensional feel. Add shadows by clicking the “+” in the “Shadows” panel located in the sidebar.
- [Height](https://docs.makeswift.com/product/docs/the-visual-builder/panels/height.md): Height allows you to set the height of a Box to be driven by its content or to stretch to match the tallest element in the same row.
- [Visibility](https://docs.makeswift.com/product/docs/the-visual-builder/panels/visibility.md): Visibility allows you to hide elements placed directly within a box. The visibility panel is a visual representation of the box's layout.