---
id: "tools/paywalls/creating-paywalls/component-properties"
title: "Component Properties"
description: "Paywalls are made up of individual components that you add and arrange, and those components each have their own properties to be configured that define how it looks and behaves."
permalink: "/docs/tools/paywalls/creating-paywalls/component-properties"
slug: "component-properties"
version: "current"
original_source: "docs/tools/paywalls/creating-paywalls/component-properties.mdx"
---

> **AI agents:** This is the Markdown version of a RevenueCat documentation page. For the complete documentation index, see [llms.txt](https://www.revenuecat.com/docs/llms.txt).

Paywalls are made up of individual components that you add and arrange, and those components each have their own properties to be configured that define how it looks and behaves.

## Position properties

:::info\[Parent components only]
Position properties only apply to parent components, since they control how the child components are arranged relative to one another.
:::

A parent component's **axis** controls whether its child components are arranged horizontally, vertically, or three-dimensionally.

**Alignment** determines how components are arranged against that axis; such as top, center, or bottom aligned elements across a horizontal axis.

![Axis and alignment](https://www.revenuecat.com/docs_images/paywalls/paywalls-axis-alignment.gif)

**Distribution** determines how components are spaced along the defined axis.

Last, **child spacing** determines exactly how much space should be set between each child component.

![Distribution](https://www.revenuecat.com/docs_images/paywalls/paywalls-distribution.gif)

## Size properties

Each component's **width** and **height** can be sized to:

1. Fit the space needed for the content
2. Fill the available space for the component
3. Occupy a fixed space

## Layout properties

Each component's spacing can be configured through **margin** (added space outside of the component to create distance from adjacent components) and **padding** (added space within the component to create distance between the content and the edge of the component).

By default, you can configure each value uniquely, or you can click on the icon to the right of the property to switch to configuring horizontal and vertical margin and padding simultaneously,

![Layout](https://www.revenuecat.com/docs_images/paywalls/paywalls-layout-settings.gif)

## Appearance properties

Each component may have a configurable **background color**, which can be a solid color or a gradient, and may have a specified opacity level.

A component's **shape** can additionally be configured to select between rectangle and pill.

Last, if the rectangle shape is used, then its **corner radius** can also be configured.

## Border properties

Parent components can additionally have a specified **border color** and **border width** to create visual separation between them and other components.

## Drop shadow

Parent components can have a drop shadow configured for them via a customizable **position** (x and y axis offset), **blur** (size of the shadow effect), and **color**.

## Badge

Parent components can have badges configured for them that can be used to easily append an element on top of the component that has its own text and appearance. Badges are most frequently used to callout package discounts, special offers, etc, but can also be configured for other use cases you have in mind.

Badges can be configured in either a **nested** or **overlaid** style. Nested badges on the inside border of parent component they're added to, while overlaid badges are centered on top of the border.

The exact position on the border is determined by the **axis** of that badge, as well as any additional margin you add to adjust its position along that axis.

![Badge properties](https://www.revenuecat.com/docs_images/paywalls/paywalls-badge-properties.png)

Badges can additionally have their own text styling, border, and drop shadow so they have a unique look and feel to draw a customer's attention to them.