Padding is the empty space inside the container, between its edge and the content. Margins are the empty space outside the container, between it and whatever comes before, after or beside it. Both are set per side: Top, Right, Bottom, Left.

Padding

• Default: 0px on all four sides.
• Padding matters as soon as the container has a visible background or border: without padding, the text and images touch the colored edge. Typical values are 16px to 48px.
• Padding is inside the container, so it is covered by the background color or image. Increasing the top and bottom padding is how you make a background band taller.
• Padding reduces the space left for the content. On a narrow Component Width or in a sidebar, keep padding small.

Margins

• Default: Top 0px, Right 0px, Bottom 32px, Left 0px.
• The bottom margin is what keeps consecutive components apart. Lower it to bring two related components closer; raise it (64px, 96px) to separate sections more clearly.
• Margins are always transparent: the page background shows through, never the container background.
• Left and right margins are handled for you when the component is narrower than 100% — APB centers the component automatically (see Component Width). Leave them at 0px unless a designer asks otherwise; a left or right margin on a 100%-wide component pushes it out of alignment with the rest of the page.
• Set vertical spacing on one side only (the bottom, as the default does). Mixing top and bottom margins across components makes the spacing between them hard to predict.

Accepted values

Each field takes a number followed by a unit:

Unit	Example	Meaning
px	24px	Pixels. Fixed size; the easiest to reason about.
rem	1.5rem	Multiples of the site’s base font size (usually 16px, so 1.5rem = 24px). Scales with the visitor’s font settings.
em	2em	Multiples of the component’s own font size.
%	5%	Percentage of the width of the surrounding area (for all four sides, including top and bottom).

Decimals are allowed (0.5rem). Negative values, values without a unit and anything else are rejected when you save. An empty field means “no rule”: the component then uses whatever spacing the site theme gives it, which is usually none — type 0px when you explicitly want zero.

Examples

Goal	Padding	Margins
Plain component in the flow of the page	0px all sides	0 / 0 / 32px / 0 (defaults)
Colored band with comfortable breathing room	32px all sides	0 / 0 / 48px / 0
Tall hero with a background photo	96px top and bottom, 32px left and right	0 / 0 / 64px / 0
Two components that belong together	as needed	first: bottom 8px; second: default

The Border group draws a solid line around the container — on all four sides or only some of them — in one color, with optional rounded corners.

The fields

Field	Default	What to type
Top / Right / Bottom / Left	none	The thickness of the line on that side: 1px, 2px, 4px… or none for no line. Each side is independent.
Border color	#000000 (black)	Click the swatch to open the color picker, or type a hex color such as #184D9B. One color is used for all sides that have a border.
Border radius	none	How rounded the corners are: 4px (subtle), 8px, 16px, or 50% (a pill or circle shape). none keeps square corners.

How it behaves

• Solid only. There is no dashed or dotted option; the line is always continuous.
• The border sits between padding and margin. Without padding, the content touches the line. Add 16px to 32px of padding when you draw a border on all sides.
• The radius also clips the background. When you set a radius, the container background (color, image or video) is rounded to the same corners, and anything that would stick out of the rounded corner is cut off.
• The radius works without a border. You can round the corners of a plain background band by setting a radius and leaving all sides at none.
• Sizes follow the same rules as padding: a number with a unit (px, rem, em, %). Invalid values are rejected when you save.

Examples

Look	Top	Right	Bottom	Left	Color	Radius
Thin frame	1px	1px	1px	1px	#D9E2EC	8px
Card with rounded corners	2px	2px	2px	2px	#009A6E	16px
Accent line on the left (quote style)	none	none	none	6px	#FF6D00	none
Divider under the component	none	none	1px	none	#CBD2D9	none

The 90%-wide feature box on the Component Width page is a real example: a 3px green border with rounded corners.

The Background group fills the container with a color, an image or a video, controls how transparent or blurred that fill is, and can change the color of the text printed on top of it.

The fields

Field	Default	Purpose
Background color	empty	A flat color filling the container.
Text color	empty	Color of the section title and intro (and optionally the items) so they stay readable on the background.
Text color applies to	Exclude items	Whether Text color also reaches the text inside the component’s items.
Background opacity (%)	100	Transparency of the background color, from 0 (invisible) to 100 (solid).
Background blur (px)	0	Softens the background image or video.
Background media	none	An image, uploaded video or YouTube/Vimeo video that fills the container.
Background Media Parallax	off	Scroll effect for a background image; see its own page.

Background color

• Click the swatch to open the color picker, or type a hex value such as #184D9B. Clear the field to remove the color.
• The color fills the whole container: padding included, margins excluded. Add padding so that the content does not touch the edge of the colored area.
• With a border radius, the color is rounded to the same corners.
• When a Background media is also set, the image or video covers the color; the color is only visible for an instant while the media loads, or through transparent parts of a PNG. Use one or the other.

Text color and “Text color applies to”

A dark background makes the default (dark) text unreadable. Text color fixes that without touching the theme:

• Pick a color (usually white, #FFFFFF, on dark backgrounds). Leave it empty to inherit the normal page text color.
• Text color applies to decides how far the color reaches:
  • Exclude items (default) — only the Section Title and Intro Text change color. The items keep their own styling (a card with a white body stays readable).
  • Include items — the text inside the component’s items changes color as well. Use it for components whose items are plain text on the container background, such as a Links list or a Special List.
• Text color has no effect until you set it; the “applies to” choice alone does nothing.

The full-width feature box on the Component Width page shows the combination: blue background color, white text color, rounded corners.

Background opacity (%)

• A whole number from 0 to 100. 100 is a solid color; 50 lets half of what is behind the container show through; 0 makes the color invisible.
• Opacity applies to the Background color. It does not fade a background image or video, and it never affects the text.
• Typical use: a light tint over a patterned page background (opacity 20–40) so the component stands out gently.

Background blur (px)

• A whole number of pixels, 0 (default) for no blur. 2–4px softens a photo slightly; 8–12px turns it into an abstract wash.
• With a Background media, the image or video itself is blurred (and enlarged a little so its edges stay covered). This is the usual way to keep a title readable over a busy photo.
• Without media, and with a translucent or absent background color, the blur is applied to whatever lies behind the container (a “frosted glass” effect). On a plain page background this is not noticeable.
• Blur never affects the text or the items.

Background media

1. Click Add media. The media library opens; pick an existing item or upload a new one.
2. Three kinds of media are accepted: an Image, an uploaded Video file, or a Remote video (a YouTube or Vimeo link).
3. Only one item can be selected. Use Remove next to it to choose another.

On the page:

• The media is scaled to cover the whole container and is centered; parts of it are cropped when the container’s shape differs from the media’s. Give the container enough padding (top and bottom) so a reasonable part of the picture is visible.
• Videos play automatically, muted and in a loop, without controls — they are decoration, not content. Keep them short and light; for anything the visitor should watch, use the Video component instead.
• An image background can be given a scroll effect with Background Media Parallax.
• Combine with Text color (white) and, if needed, Background blur for readability.

Recipes

Look	Settings
Dark band with white heading	Background color #184D9B · Text color #FFFFFF · Exclude items · Padding 32px
Soft highlight behind a component	Background color #F5F7FA (or a brand color at opacity 15) · Padding 24px · Border radius 8px
Photo hero with readable title	Background media (image) · Text color #FFFFFF · Blur 4px · Padding 96px top/bottom
Ambient video behind a links grid	Background media (video) · Text color #FFFFFF · Include items · Padding 48px

Parallax makes a background image move a little more slowly than the page while the visitor scrolls, which gives the container a sense of depth. It is an optional effect for containers that have an image as Background media.

Before you start

• The container must have a Background media of type Image. Parallax is not available for video backgrounds or for a plain background color.
• The Background Media Parallax group (inside the Background group) only shows up once an image is selected. If you have just added the image and do not see the group, save the page and open the component again.
• Give the container generous top and bottom padding (64px or more). The effect is invisible on a short container because there is not enough distance to scroll through.

The fields

Field	Default	Meaning
Enable parallax	off	Turns the effect on. The other three fields appear only when it is on.
Parallax orientation	Up	The direction the image drifts as the visitor scrolls down: Up (the classic effect), Down, Left or Right. Left and right give a subtle sideways slide.
Parallax scale	1.4	How much the image is enlarged so that it has room to move without showing empty edges. 1.0 means no enlargement (and almost no visible movement); 1.4 enlarges it by 40%; higher values move more but crop more of the picture. Stay between 1.2 and 1.8.
Parallax delay	1	How smoothly the image follows the scroll, in seconds. 0 makes it follow instantly; 1 adds a gentle easing; 2 or more feels floaty. Decimals are allowed (0.6).

How it behaves

• The image is enlarged by the scale factor and shifted as the container moves through the viewport. When the container is in the middle of the screen the image is centered; at the top or bottom of the screen it is offset in the chosen orientation.
• Because of the enlargement, the visible part of the picture is smaller than with a static background. Choose photos whose subject is near the center and avoid images that contain text.
• Background blur and Text color work together with parallax. Background opacity does not affect the image.
• If the visitor’s browser cannot run the effect, the image is shown as a normal static background — nothing breaks.
• Parallax is decorative. Do not rely on it to convey information, and avoid stacking several parallax containers on one page; one hero at the top is usually enough.

Recipe: hero with parallax

Setting	Value
Component	Links (two or three buttons) or Feature Box
Show Section Title	Yes, with a short Intro Text
Padding	120px top, 120px bottom, 32px left and right
Background media	A wide landscape photo (at least 1920 pixels wide)
Text color	#FFFFFF, Include items
Enable parallax	on; orientation Up; scale 1.4; delay 1
Target Placement	Main Content Top or Top region, to place it above the title