Component properties
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
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.
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.
Size properties
Each component's width and height can be sized to:
- Fit the space needed for the content
- Fill the available space for the component
- 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,
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.
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.