This page shows where the Page Builder lives on the edit form, how to add a component, how to fill it in, and what happens when you save. Every other page in APB Basics assumes you have read this one.

What is a component?

A component is a self-contained block that you add to a page: an accordion, a carousel, a gallery, a list of links, a video, and so on. A page is built by stacking components in the order you want. Most components contain items — the individual panels of an accordion, the slides of a slideshow, the cards of a feature box.

Aero Page Builder ships fifteen components:

Component	What it is for
Accordion	Stacked panels that open and close; good for FAQs and long lists of details.
Carousel	Several cards shown side by side, scrolled with arrows.
Feature Box	A grid of image cards with a title, text and optional link.
Image Gallery	A grid of thumbnails that open in a lightbox.
Infinite Logos	A continuously scrolling strip of logos (sponsors, partners).
Links	A list or grid of links, buttons or icon links.
Overlay Content	Teasers that open their full content in an overlay window.
Profiles	People cards (photo, name, role) with an optional detail pop-up.
Read More	A short text that expands to show the rest.
Simple Content	Free-form rich text arranged in regions, with optional backgrounds.
Slideshow	Full-width slides with text over images, played one at a time.
Special List	A styled list (icons, numbers, checkmarks).
Tabs	Content split into tabs.
Video	One or more videos (uploaded or from YouTube/Vimeo).
Views	Embeds a Drupal View (a dynamic list of content) inside the page.

Each component has its own page in the Components section of this documentation. This section, APB Basics, covers the settings they all share.

Where is the Page Builder?

Edit a page whose content type has the Page Builder enabled (on most sites: Basic page; your administrator may enable it on other content types). Below the usual Title and Body fields you will find a blue Page Builder bar. Everything under that bar is APB.

Adding a component

1. Scroll to Add new content and click the button of the component you want, for example Add Accordion.
2. A new card appears at the end of the list, already expanded. Give it a Section Title so you can recognise it later (see Section Title and Intro Text).
3. Fill in the component’s own fields and add its items (see below).
4. Save the page. Components are saved together with the page; there is no separate save button for a component.

You can add as many components as you need and mix different kinds on the same page. Components are displayed in the order of the cards, from top to bottom, unless you move them elsewhere with Target Placement.

Anatomy of a component card

From top to bottom, a card contains:

• Header — the component type, the Section Title (once you have typed one), and the red Remove button. Click anywhere on the header to collapse or expand the card.
• Section Title row — Section Title, Show Section Title and the Published switch. See Section Title and Intro Text.
• Config row (light blue) — the layout settings: Target Placement, Component Width, Columns and Column Gap, Color Style, Custom Class, plus a few options specific to the component (for the Accordion: Open first item).
• Intro Text — collapsed by default; an optional paragraph shown under the section title.
• Items — the table of the component’s items with Add new … and Add existing … buttons.
• Access Control — when present, lets you restrict who sees the component. See Advanced settings.
• Container Settings — collapsed by default; spacing, border and background of the box around the component. See Container Settings.

Adding items to a component

1. Inside the card, click Add new … (for example Add new Accordion Item). A small form opens inside the card.
2. Fill in the item’s title and content and click the green Create … button at the bottom of that form. The item is added to the table.
3. Repeat for each item. Drag the handle at the left of a row to reorder items.
4. Use the Edit, Duplicate and Remove buttons in the Operations column to change an item later.

Add existing … lets you reuse an item that already exists on another page (start typing its title). This is handy for items that must be identical everywhere, such as a standard disclaimer panel. Editing a shared item changes it on every page that uses it.

Items are saved only when you save the page. If you leave the edit form without saving, new items are lost.

Reordering, collapsing and removing components

• Reorder — drag the handle at the left of a card up or down. If you prefer numbers, click Show row weights at the top right of the Page Builder and set a weight per card (lower numbers first).
• Collapse / expand — click the card header. Collapsed cards still save normally; collapsing is only for your convenience while editing.
• Publish / unpublish — the Published switch in the Section Title row hides the component from visitors without deleting it. Use it to prepare a component in advance or to take one down temporarily.
• Remove — the red button in the header removes the component from the page. The card is replaced by a notice with a Restore button until you save; after saving, the removal is permanent.

Saving and checking the result

Click Save at the bottom of the edit form as usual. Open the page to check the result. If a component does not appear where you expected, the usual causes are:

• its Published switch is off;
• its Target Placement points at an area that does not exist on this page (the component is then hidden);
• its Access Control excludes the role you are browsing with;
• the component has no items yet.

Where to go next

• Section Title and Intro Text — name the component and add an introduction.
• Component Width and Columns and Column Gap — control the layout.
• Target Placement — move a component out of the body.
• Container Settings — spacing, borders and backgrounds.

Every component starts with the same three fields — Section Title, Show Section Title and Published — and most also offer an optional Intro Text. Together they give the component a heading and a short introduction.

Section Title

A short plain-text heading for the component, for example Frequently asked questions or Our partners. It is used in two places:

• In the editor, the title appears in the card header next to the component type, so you can tell your components apart when they are collapsed. This works even if the title is not shown on the page.
• On the page, when Show Section Title is Yes, the title is displayed as a heading directly above the component, inside its container. The heading uses the page’s standard section heading style (an h2), so it lines up with other headings on the page.

Always fill in a Section Title, even when you do not want it displayed. A page with five components all labelled just “Accordion” is much harder to maintain.

Show Section Title

A required Yes/No choice that controls whether the Section Title is printed on the page.

• No (default) — the title is kept for the editor only. Use this when the component follows a heading you already wrote in the Body, or when the component speaks for itself (a slideshow, a logo strip).
• Yes — the title is printed above the component.

The title is styled by the site theme. If you set a Text color in the container settings, the section title takes that color as well.

Published

The switch at the right of the row. When it is off, the component is kept on the page but is not shown to visitors. Editors still see it in the edit form. Use it to draft a component before it goes live, or to hide one temporarily without losing its content.

Intro Text

A collapsed Intro Text section sits just below the Config row on most components. It holds an optional rich-text introduction that is printed between the section title and the component’s items.

• Click the Intro Text heading to expand the section; it is collapsed to keep cards short.
• You can use paragraphs, bold and italic, lists, links and even images, exactly as in the Body field. Keep it short: one or two sentences that explain what the component contains.
• Intro Text is printed even when Show Section Title is No.
• Intro Text follows the same Text color as the section title when one is set in the container settings.

Components that do not have an Intro Text section: Overlay Content, Read More and Special List. Their own fields cover that need.

What it looks like on the page

With Show Section Title = Yes and an Intro Text, the component renders in this order inside its container:

1. Section Title (heading)
2. Intro Text
3. The component’s items (accordion panels, slides, cards, …)

All three sit inside the same box, so a background or border set in Container Settings wraps the title and the intro as well as the items.

Component Width decides how much of the available horizontal space a component occupies. At 100% it fills the content area; at any smaller value it becomes narrower and is centered automatically.

Where to find it

In the light-blue Config row of the component card. The drop-down offers eleven values:

Value	Typical use
100% (default)	Almost everything. The component takes the full width of the content area.
90%, 80%, 75%, 70%	A slightly narrower block that stands out from surrounding text, e.g. a video or a quote-like feature box.
66%, 60%, 50%	Narrow blocks such as a single-column links list or a small gallery, centered under the text.
40%, 33%, 25%	Very narrow; use with care — text inside becomes hard to read on medium screens.

Overlay Content is the only component without this setting; it always uses the full width.

How it behaves

• Percent of the content area, not of the screen. If the page has a sidebar, 100% means the main column, not the whole window. If you move the component with Target Placement, the percentage applies to the area you moved it to.
• Always centered. A component narrower than 100% gets equal empty space on its left and right. There is no left- or right-aligned option.
• Items adapt. When a component uses Columns, the item width is calculated from the component width: three columns at 50% are half as wide as three columns at 100%.
• Small screens ignore it. On screens up to 680 pixels wide (phones) every component is displayed at full width, whatever the setting, so that content stays readable.
• Container settings follow the component. Backgrounds, borders and padding apply to the narrowed box, not to the full content area. The empty space on both sides stays transparent.

Example

The two feature boxes below come from the same page; the first is set to 100%, the second to 90%. Notice the equal margins on both sides of the second one.

Tips

• Keep most components at 100% and use a narrower width only to make one block stand out; alternating widths on every component makes the page look ragged.
• For side-by-side arrangements use Columns inside one component rather than two narrow components — two components are always stacked, never placed next to each other.

Components that show several items in a grid let you choose how many items sit side by side (Columns) and how much space separates them (Column Gap).

Which components have these settings

Carousel, Feature Box, Image Gallery, Links, Profiles, Simple Content, Special List, Video and Views. Components that stack their items vertically by nature (Accordion, Tabs, Read More, Slideshow, Infinite Logos, Overlay Content) do not have them.

A few components interpret the settings in their own way — for a Carousel, Columns is the number of cards visible at once; for Views it applies only in the Boxed Card display. The component pages give the details.

Where to find them

Both drop-downs are in the light-blue Config row of the card, next to Target Placement and Component Width.

Columns

• Choose from 1 column to 10 columns. The field is required; each component has its own sensible default (Feature Box and Profiles: 3 columns; Links: 2 columns).
• Items are placed left to right; when a row is full the next item starts a new row. Six items in three columns make two rows; seven items make three rows with a single item on the last one.
• All columns have the same width. The item width is worked out automatically: (component width − gaps) ÷ number of columns. A narrower Component Width therefore makes every column narrower.
• Pick the number of columns from the content, not the other way round: three or four cards with images, six to eight small logos or icons, one or two for text-heavy items.

Column Gap

• The space between neighbouring items, both horizontally (between columns) and vertically (between rows). Values run from 0px (items touch) to 64px.
• Defaults vary per component (Feature Box: 30px; Profiles: 32px; Links: 16px). Values around 16–32px suit most designs.
• The gap is not added on the outside of the grid; the first and last columns stay flush with the component edges. Use Padding if you want space around the whole grid.
• With 1 column there is nothing to separate horizontally; some components (Views) ignore the gap entirely in that case.

What happens on tablets and phones

The number of columns you choose is the number used on desktop screens. On smaller screens APB reduces it automatically so that items stay readable:

Screen width	Columns actually shown
Wider than 980 px (desktop)	As configured (1 to 10).
681 to 980 px (tablet)	3 or 4 columns become 2; 5 to 10 columns become 3; 1 and 2 stay as they are.
Up to 680 px (phone)	Always 1 column, items stacked.

The gap value stays the same on every screen size. The Carousel is the exception to the table above: it keeps sliding and uses its own steps (at most 3 cards up to 900 px, 2 up to 680 px, 1 up to 480 px).

Tips

• Try to give the grid a number of items that fills the last row (6 or 9 items for 3 columns, 8 for 4 columns). A lone item on the last row looks unfinished.
• Images inside items are cropped or scaled per component; a large number of columns means small images. Check the result on the page after saving.

By default a component is printed in the page body, in the order of the cards. Target Placement lets you send it somewhere else on the page instead — above the title, into a sidebar, or edge to edge across the main column — without touching the theme.

Where to find it

Target Placement is the first drop-down of the light-blue Config row on every component. It is required; the default is Body.

The areas of the page

Option	Where the component appears	Notes
Body (default)	Exactly where the card sits in the Page Builder list, after the page’s Body text.	Use this unless you have a reason not to. Order follows the cards.
Main Content Top	At the very top of the main content column, above the page title.	Good for a slideshow or banner that must come before the title. If several components use it, the one lowest in the card list ends up on top.
Main Content Bottom	At the very end of the main content column, after everything else on the page.	Good for a call-to-action, related links or a footer-like block. Several components keep their card order.
Main Content - No container	Above the main content, but outside the normal content padding, so the component can stretch from edge to edge of the main column.	Use for full-bleed backgrounds. The section title gets an inner wrapper so the text still lines up with the rest of the page.
Top region	Directly under the site header, across the full width of the page, before the sidebar and the main column.	Designed for hero slideshows. The page title is hidden when a component is placed here, because the hero is expected to carry its own heading.
Sidebar Top	In the sidebar, before the sidebar blocks (menus, etc.).	Only works on pages where the theme actually shows a sidebar. Keep the component narrow: a links list, a small profile.
Sidebar Bottom	In the sidebar, after the sidebar blocks.	Same conditions as Sidebar Top.
Internal Placement 1, 2, 3	Free slots with no fixed position. A designer decides where each one appears by adding it to a page or content-type template.	They do not exist on a standard site. Use them only when your designer tells you that a slot has been prepared.
Header (this site only)	Immediately before the page-title block.	Not part of the standard set; it was added on the demo site. Your site may have similar extra options.

Example: a slideshow in the Top region

Rules worth knowing

• The move happens in the browser. The component is still saved as part of the page; it is relocated when the page is displayed. Its Component Width percentage then applies to the area it was moved to.
• Missing area = hidden component. If the chosen area does not exist on the page (no sidebar on this page, an Internal Placement the theme never defined), the component stays hidden rather than falling back to the body. When a component “disappears”, check this setting first.
• Only the areas the theme provides. The list is the same for every content type, but whether an area exists depends on the theme and on the page (for example, whether it has a sidebar). When in doubt, try it and look at the page.
• Order in a shared area. Components sent to the same area keep their card order, except in Main Content Top and the Internal Placements, where each component is inserted at the start of the area — so the last card ends up first. Drag the cards to adjust.
• Container settings and section title travel with the component. Backgrounds, borders, padding and the section title are all moved together.

Tips

• Reserve Top region for one hero component per page; two full-width slideshows stacked under the header rarely look intentional.
• Keep sidebar components light. Ten columns of feature boxes in a 300-pixel sidebar will collapse to a single column and become very tall.
• If a component must appear in the same area on many pages, ask your administrator whether a block would serve better; Target Placement is meant for per-page decisions.

Every component sits inside an invisible box called its container. Container Settings let you shape that box: the space inside and around it, a border, and a background color, image or video — the same way on every component.

The box around a component

The four groups of Container Settings map onto this picture:

• Padding and Margins — how much empty space there is inside the border (padding) and outside it (margins).
• Border — a line on any of the four sides, its color, and rounded corners.
• Background — a background color and/or a background image or video, with opacity and blur, plus an optional text color for the section title and intro.
• Background Media Parallax — makes a background image drift slowly as the visitor scrolls.

The container wraps the whole component: section title, intro text and items all sit inside it. When the component is narrower than 100% (Component Width), the container is the narrowed, centered box.

Where to find it

Container Settings is the last section of a component card, collapsed by default. Click its heading to open it; inside, each group (Padding, Margins, Border, Background) is a further collapsible section, followed by the Background media field.

Default values

A new component starts with a neutral container: no border, no background, no padding, and a 32-pixel margin below it so that stacked components do not touch.

Group	Default	Effect
Padding	0px on all sides	Content touches the border.
Margins	Top 0px, Right 0px, Bottom 32px, Left 0px	A gap under each component.
Border	All sides none, color #000000, radius none	No visible border.
Background	No color, no text color, opacity 100%, blur 0, no media, parallax off	Transparent; the page background shows through.

You only need to open Container Settings when you want to change something. Leaving it untouched is the right choice for most components.

Which components have Container Settings

• Full set (padding, margins, border, background, media, parallax): Accordion, Carousel, Feature Box, Image Gallery, Infinite Logos, Links, Profiles, Read More, Special List, Tabs, Video, Views.
• Padding and Margins only: Slideshow — each slide already has its own background, so the container has no border or background groups.
• No Container Settings: Simple Content (it has per-region backgrounds instead) and Overlay Content.

Typical recipes

You want	Set
A colored band behind a component	Background color + Padding 32px on all sides (so the content does not touch the colored edge) + optional Text color.
A framed box	Border 1px or 2px on all sides + Border radius 8px + Padding 24px.
A photo behind a title and intro	Background media (image) + Text color white + Padding 64px top and bottom; if the text is hard to read, add a few pixels of Background blur or choose a darker, calmer photo.
Two components closer together	Reduce the Margin bottom of the first one from 32px to 8px or 0px.
A cinematic hero	Background media (image) + Enable parallax.

Entering sizes

Padding, margin, border widths and border radius are typed as a number followed by a unit: 16px, 1.5rem, 2em or 5%. Pixels (px) are the easiest to predict. The word none is accepted for border sides and radius. A value without a unit, or with a typo, is rejected when you save the page.

Color Style applies one of the site’s preset color palettes to a component — the accent color of a carousel’s arrows, the header bars of an accordion, the buttons of a links list. You pick a name; the exact colors are defined once by the site administrator so that every page stays consistent.

Where to find it

In the light-blue Config row of the card, on the components that have it. It is a drop-down of color names sorted alphabetically.

Two palettes

There are two kinds of Color Style. They share the same field label, so the component decides which list you see.

Single-color styles

Used by Carousel, Feature Box, Image Gallery, Links, Profiles, Slideshow, Special List and Video. Each style is one accent color: Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue.

What the accent color is applied to depends on the component:

• Carousel and Slideshow — the navigation controls (arrows, dots).
• Image Gallery — the frame behind each thumbnail.
• Special List — the list text and markers.
• Feature Box, Links, Profiles, Video — the accent parts of each card, button or player, which vary with the display type chosen.

The component pages show exactly which parts change color for each display type. Feature Box, Links, Profiles and Special List also have a Color Style on each item, so one card or link can use a different accent than the rest.

Multi-state styles

Used by Accordion and Tabs (and by the items of Read More). These components have elements that react to the visitor — a header that is closed, open or hovered; a tab that is selected or not — so each style is a small set of colors:

Color	Used for
Base	The header or tab in its normal state.
Active	The open accordion panel header or the selected tab.
Hover	The header or tab under the mouse pointer.
Title text	The text printed on top of those backgrounds (white on dark styles, near-black on light ones).

Available styles: Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow Orange and Red, Fancy White.

Color Style versus Container Settings

Color Style and Container Settings › Background answer different questions:

• Color Style colors the parts of the component itself (arrows, headers, buttons) from a fixed palette.
• Background in Container Settings colors the box around the component, with any color you like, and can also set the text color of the section title and intro.

They combine well: a Feature Box with the White Color Style on a dark blue container background is a common pattern.

Changing the palette

Editors cannot add colors from the component card. Site administrators maintain the two lists under Structure › Taxonomy › APB Color Styles 01 and APB Color Styles 02, where each entry has a name and its color values. Changing a color there updates every component that uses that style.

Two settings you will rarely need day to day: Custom Class, a hook for designers, and Access Control, which shows a component only to visitors with certain roles.

Custom Class

Custom Class is the last field of the light-blue Config row. It is a plain text field that adds a CSS class name to the component’s outer wrapper on the page.

• Leave it empty unless a designer or developer asks you to type something specific. On its own, a class name changes nothing; it only works when the site theme contains a matching style rule.
• Type only what you were given, for example highlight-box or compact spaced. Class names contain letters, digits and hyphens; several names are separated by spaces.
• Typical uses: a one-off spacing tweak, a special background pattern, hiding the component in print, or hooking a component for site analytics.
• Do not use Custom Class to fix layout problems you can solve with Component Width, Columns or Container Settings.

Access Control

Access Control restricts who can see a component according to the visitor’s user role. It is a collapsed section of the component card, below the items.

Access Control is not enabled on every component or on every site. On the demo site it currently appears on the Image Gallery only; ask your administrator if you need it elsewhere.

How it works

1. Choose the mode:
   • Allow the selected below — only visitors who have at least one of the ticked roles see the component.
   • Restrict the selected below — visitors who have any of the ticked roles do not see the component; everyone else does.
2. Tick one or more roles. The roles are combined with OR: having any one of them is enough.
3. If you tick no role, the setting is neutral and the component is visible to everyone, whatever the mode.

The check applies to viewing only. Editing permissions are unchanged, and users who hold the site-wide permission to bypass this kind of restriction (typically administrators) still see the component.

Examples

Goal	Mode	Roles ticked
Members-only download links	Allow the selected below	Authenticated user (plus any member roles)
A “Log in to see more” teaser shown only to visitors who are not logged in	Allow the selected below	Anonymous user
Hide a draft component from the public while editors review it	Allow the selected below	Content editor, Administrator
Hide an internal notice from anonymous visitors	Restrict the selected below	Anonymous user

Tips

• Access Control hides the component entirely, including its section title. If you want a visible placeholder, add a second component with the opposite rule (for example an anonymous-only “Log in to see this content” text).
• Remember that Published (see Section Title and Intro Text) is the simpler tool when you just want to hide a component from everyone.
• When checking the result, log out or use a private browser window: as an editor or administrator you will usually see everything.

An Accordion is a stack of panels. Each panel shows only its title until the visitor clicks it; the body then unfolds below the title and folds back when clicked again. Use it for FAQs, step lists, terms and conditions, or any long content that is easier to scan when grouped under headings.

What it is for

Accordions keep a page short without hiding information: visitors see every heading at once and open only the panels they care about. Typical uses are questions and answers, program descriptions grouped by day, or a list of services where each service has a paragraph of detail.

See it live on the example page APB Accordion.

Structure

An Accordion component has two levels:

• The Accordion itself — the card you add to the Page Builder. It carries the shared settings (section title, intro, width, placement, color, container) and the list of panels.
• Accordion Items — one per panel. Each item has a title (always visible) and a body (visible when open). Items are created inside the Accordion card and can be reordered by dragging.

The panels render in the order of the items table. Only one accordion is needed per group of panels; add a second Accordion component when you want a second heading and intro.

Component settings

Settings shared with every component are documented in APB Basics; the table lists them briefly and explains the Accordion-specific ones.

Setting	Options	Default	What it does
Section Title / Show Section Title	text; No / Yes	— / No	Heading above the panels. See Section Title and Intro Text.
Intro Text	rich text	empty	Optional paragraph between the heading and the first panel.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebar Top/Bottom, Internal Placement 1–3	Body	Where the accordion appears. See Target Placement.
Color Style	Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow	Blue	Color of the panel titles and their open/closed indicator. This component uses the second palette (see Color Style).
Component Width	25% … 100%	100%	Width of the accordion inside the content area, centered when below 100%. See Component Width.
Open first item	on / off	off	When on, the first panel is already open when the page loads. Leave it off for FAQs; turn it on when the first panel is the one most visitors want.
Custom Class	text	empty	For designers. See Advanced settings.
Access Control	roles	everyone	Restrict who sees the accordion. See Advanced settings.
Container Settings	padding, margins, border, background, media	32px bottom margin	The box around the accordion. See Container Settings.

Accordion Item fields

Field	Required	What it does
Title	yes	The text of the panel header. Keep it to one line; it is also what visitors click.
Body	no	Rich text shown when the panel is open: paragraphs, lists, links, images.
Description (internal)	no	A note for editors only. It appears in the Add existing search so you can tell apart items with the same title; it is never shown on the site.
Custom Class	no	Extra CSS class on this panel, for designers.

How to use it

1. In the Page Builder, click Add Accordion.
2. Type a Section Title (for example “Frequently asked questions”) and set Show Section Title to Yes if it should appear on the page.
3. Optionally write an Intro Text.
4. Click Add new Accordion Item, type the Title and the Body, then click Create Accordion Item. Repeat for every panel.
5. Drag the items into the order you want.
6. Pick a Color Style that matches the page and, if the accordion should not span the whole content area, a Component Width.
7. Save the page and check that the panels open and close.

Tips

• Visitors can open several panels at once; opening one does not close the others.
• An accordion with a single item works but looks odd — use Read More for one collapsible block of text.
• Panel bodies accept any rich text, including images and tables, but avoid putting another interactive component inside a panel.
• To place an accordion next to text, build a Simple Content with a Region item and point the accordion’s Target Placement at it.

For site builders

Item	Value
Module	apb_pb_accordion
Paragraph types	apb_pb_accordion (component), apb_pi_accordion_item (panel)
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Entity Access by Role Field, core Options / Taxonomy / Text
Shared vocabularies used	apb_tax_cs_02 (Color Style), apb_tax_width, apb_tax_target_placement
Front-end	Library apb_pb_accordion/accordion (accordion-js, bundled) on top of apbuilder/aero-page-builder-core; per-instance colors are injected as inline CSS.
Permissions	Install grants view on both bundles to anonymous and authenticated users and the create/update/delete grants to the editor roles.
Container settings	Full profile (padding, margin, border, background, media, parallax).
Example page	/apbuilder_examples/apb-accordion

A Carousel shows a row of images that scroll sideways. You choose how many images are visible at once (the columns); when there are more images than columns, arrows — and, optionally, autoplay — move to the next group. With a single column it behaves like a simple image slideshow.

What it is for

Use a Carousel to show a set of images in a compact strip: event photos, product shots, partner logos with links, or a rotating set of banners in a narrow column. Each image can link to a page and can show a caption under it.

See it live on the example page APB Carousel, which also shows a one-column carousel inserted in a Simple Content region.

Structure

• The Carousel component holds the layout (columns, gap, image size), the behaviour (autoplay, navigation, loop) and the list of slides.
• Slides (APB Carousel slide) — one per image, with an optional link and caption.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Columns	1 … 10	4	How many images are visible at the same time. With 1 the carousel becomes a slideshow of single images and Column Gap is ignored. See Columns and Column Gap.
Column Gap	0 … 60px	10px	Space between visible images.
Slide image size	Small, Medium, Large, XL, 2XL	Medium	Which resized copy of each image is loaded. Pick the smallest size that still looks sharp at the number of columns you use: Small for 4 or more columns, Large/XL for 1–2 columns.
Autoplay	Yes / No	Yes	Advances automatically every few seconds. Pauses while the pointer is over the carousel.
Navigation	Yes / No	Yes	Shows the previous/next arrows.
Infinite loop	Yes / No	No	After the last image, continue with the first instead of stopping.
Show slide titles	Yes / No	No	Displays each slide’s Title as a caption under the image.
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	Black	Color of the arrows and captions. See Color Style.
Component Width	25% … 100%	100%	See Component Width.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Slide fields

Field	Required	What it does
Image	yes	PNG, GIF, JPG or WebP. Use images with the same proportions for every slide so the strip stays even.
Title	no	Caption under the image, shown only when Show slide titles is Yes.
Link	no	Internal or external URL; the whole image becomes a link.
Internal description	no	Editor note for the Add existing search; not shown on the site.
Custom slide class	no	Extra CSS class on this slide.

How to use it

1. Click Add Carousel in the Page Builder and give it a Section Title.
2. Set Columns to the number of images you want visible at once, then choose a matching Slide image size.
3. Decide on Autoplay, Navigation and Infinite loop. For a short set of images that must all be seen, keep Navigation on.
4. Click Add new Slide, upload the image, add a Link and a Title if needed, and click Create. Repeat for each image.
5. Save and check the page. If images look blurry, choose a larger image size; if the strip is slow to load, choose a smaller one.

Tips

• Add at least one more slide than the number of columns, otherwise there is nothing to scroll and the arrows do nothing.
• For sponsor or partner logos that should scroll continuously, prefer Infinite Logos; for full-width banners with text, prefer Slideshow.
• A one-column carousel inside a Simple Content region is a good way to put a small slideshow next to a paragraph of text.

For site builders

Item	Value
Module	apb_pb_carousel
Paragraph types	apb_pb_carousel, apb_pi_carousel
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Taxonomy Machine Name, core Image / Link / Options / Taxonomy / Text
Own vocabulary	apb_tax_carousel_image_size (Small … 2XL); image styles apb_carousel_small … apb_carousel_2xl
Shared vocabularies	apb_tax_columns, apb_tax_column_gap, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	Splide (from apbuilder/aero-page-builder-core) configured from data-apb-* attributes; arrow colors injected as inline CSS.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-carousel

A Feature Box is a grid of cards. Each card combines an image, a title, a short text and, optionally, a button or a link that covers the whole card. Seven display types change how image and text are arranged and how the card reacts when the pointer hovers over it.

What it is for

Use Feature Boxes to present a handful of things side by side that each deserve a picture: services, programs, destinations, product lines, news highlights. The cards invite a click, so they work well as an entry point to deeper pages.

The example page APB Feature Boxes shows every display type, so open it while reading this page.

Structure

• The Feature Box component holds the grid settings (columns, gap, image height, orientation), the Display Type and the color palette.
• Feature Box Items — one per card: image, title, body, optional button, optional full-card link, optional color override.

All cards in one component share the same display type, height and orientation; that is what makes the grid look even. To mix styles, add two Feature Box components.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro Text	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Display Type	Type 1 … Type 7	Type 1	The card design (see the list below).
Columns	1 … 10	3	Cards per row. See Columns and Column Gap.
Column Gap	0 … 60px	30px	Space between cards.
Height	100px … 500px	300px	Height of the image area of every card. Taller cards suit portrait images and long text.
Orientation	Landscape, Portrait, Square	Landscape	Which crop of the image is used. When you upload an image you can adjust the three crops; the orientation decides which one the cards show.
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	Blue	Palette for titles, panels and buttons. Each card can override it. See Color Style.
Component Width	25% … 100%	100%	See Component Width.
Custom Class / Access Control	—	—	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

The seven display types

The descriptions below are a guide; the exact look depends on the palette and on your theme. Check the example page for each one.

• Type 1 — the image fills the card; a light, slightly translucent panel with the title sits at the bottom. On hover the image grows behind the panel and the text becomes readable; long text scrolls inside the panel.
• Type 2 — image with the title over it; the image zooms gently on hover.
• Type 3 — like Type 2 with a darker tinted layer over the image so white text stays readable; stronger zoom on hover.
• Type 4 — image with a large title; zoom on hover.
• Type 5 — a classic white card: image on top with rounded upper corners, title, text and button below.
• Type 6 — two columns inside the card: image on one side, title and text on the other.
• Type 7 — rounded image on top, title and text below, button under the text; zoom on hover.

Feature Box Item fields

Field	Required	What it does
Title	no	Card heading.
Body	no	Rich text under the heading. Keep it short; in Types 1–4 it appears over the image.
Image	no	PNG, GIF, JPG, WebP or AVIF. Adjust the landscape, portrait and square crops after uploading.
Button	no	A link with a label, rendered as a button on the card. Only the button is clickable.
Link	no	An invisible link over the whole card: clicking anywhere opens it. Do not combine with a Button on the same card — the card link wins and the button cannot be clicked separately.
Color Style	no	Overrides the component palette for this card only.
Text Shadow	no (Yes)	Adds a soft shadow behind the text so it stays readable over busy images.
Description (internal)	no	Editor note; never shown.
Custom Class	no	Extra CSS class on this card.

How to use it

1. Click Add Feature Box and set the Section Title.
2. Choose a Display Type, the number of Columns (3 or 4 is typical) and the Orientation that matches your images.
3. Click Add new Feature Box Item; upload the image, type the Title and a one- or two-sentence Body.
4. Add either a Button (label + URL) or a full-card Link, then click Create. Repeat for every card.
5. Save and hover over the cards on the page to check the effect. Adjust Height if text is cut or the image area looks squeezed.

Tips

• Use the same number of cards as columns, or a multiple of it, so the last row is full.
• If a card has a long text, Type 1 scrolls it inside the panel; other types may hide the end. Prefer a Button with “Read more” to a long body.
• Per-card Color Style is handy to highlight one card (for example the recommended plan).
• For a text-only grid without images use Special List; for people use Profiles.

For site builders

Item	Value
Module	apb_pb_feature_box
Paragraph types	apb_pb_feature_box, apb_pi_feature_box
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Crop, Image Widget Crop, core Image / Link / Options / Taxonomy / Text
Own vocabularies	apb_tax_fb_display_type (type_1 … type_7), apb_tax_fb_height (100px … 500px); crop types apb_feature_box_landscape / _portrait / _square; image styles apb_feature_box, _2, _3
Shared vocabularies	apb_tax_orientation, apb_tax_columns, apb_tax_column_gap, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_feature_box/frontend: GSAP hover animations and per-type layout from data-apb-*; an item admin library toggles fields in the editor.
Container settings	Full profile.
Example page	/apb/apb-feature-boxes

An Image Gallery shows a set of photos as square thumbnails. Clicking a thumbnail opens the photo full size in a lightbox, where visitors can step through the whole set. The gallery can be a grid of thumbnails or a single thumbnail that stands for the entire set.

What it is for

Use it for event photos, facilities, portfolios — any set of pictures that visitors may want to browse at full size without leaving the page. The Single Image layout is useful when space is tight, for example next to a paragraph inside a Simple Content column.

See it live on the example page APB Image Gallery.

Structure

• The Image Gallery component holds the layout (Grid or Single Image), the columns and gap, a hover color and an optional description.
• Image Gallery Items — each item holds a set of images (upload as many as you like in one item). Most galleries need a single item; use several items when you want to keep sets apart for editing.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro	—	— / No / empty	See Section Title and Intro Text.
Description	rich text	empty	A second text block, shown under the intro and above the thumbnails.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Display Layout	Grid, Single Image	Grid	Grid shows every image as a thumbnail. Single Image shows only the first image; clicking it opens the lightbox with all of them. Columns and Column Gap are ignored in Single Image.
Columns	1 … 10	6	Thumbnails per row (Grid only). See Columns and Column Gap.
Column Gap	0 … 60px	10px	Space between thumbnails (Grid only).
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	Blue	Color of the hover effect on thumbnails and of the caption. See Color Style.
Component Width	25% … 100%	100%	See Component Width.
Custom Class / Access Control	—	—	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Image Gallery Item fields

Field	Required	What it does
Title	no	Name of the set; shown as a caption in the lightbox when the image has no title of its own.
Images	yes	One or more PNG, GIF, JPG or WebP files. For each image you can set a Title (lightbox caption), Alternative text (for screen readers and search engines) and adjust the square Crop used for the thumbnail.
Admin description	no	Editor note; never shown.

How to use it

1. Click Add Image Gallery, set the Section Title and, if useful, an Intro or Description.
2. Leave Display Layout on Grid and pick the number of Columns (4–6 works well for photos).
3. Click Add new Image Gallery Item, give it a Title, and upload the images. Fill in the alternative text for each; adjust the square crop when a face or subject is cut off.
4. Click Create, save the page, and click a thumbnail to check the lightbox order — it follows the upload order.

Tips

• Upload reasonably sized files (about 2000px on the long side is plenty). The site resizes thumbnails automatically, but very large originals slow down the lightbox.
• Use Single Image plus Component Width 100% inside a Simple Content column to get a “click to see more photos” tile.
• If you want captions and links on each picture rather than a lightbox, use Carousel or Feature Box instead.

For site builders

Item	Value
Module	apb_pb_image_gallery
Paragraph types	apb_pb_image_gallery, apb_pi_image_gallery
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Crop, Image Widget Crop, core Image / Options / Taxonomy / Text
Own config	crop type apb_gallery_thumb; image styles apb_image_gallery_thumb (grid) and apb_image_gallery (lightbox)
Shared vocabularies	apb_tax_display_layout (Grid / Single Image), apb_tax_columns, apb_tax_column_gap, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_image_gallery/frontend: GLightbox (from aero-page-builder-core) with one gallery per component.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-image-gallery

Infinite Logos is a strip of images that scrolls continuously from right to left and never stops — when the last logo leaves the screen the first one re-enters. Each logo can link to a site, show a tooltip, and react to the pointer (reveal its colors, grow, or both).

What it is for

The classic use is a row of sponsor, partner or member logos on a home page or event page. It is a livelier alternative to a Carousel when the images are small and numerous and none of them needs a caption.

See it live on the example page APB Infinite Logos.

Structure

• The Infinite Logos component sets the box size, gap, hover behaviour and whether the strip spans the full page width.
• Infinite Logos Items — one per logo, with an optional second image for the hover state, a link and tooltip texts.

Every logo is drawn inside a box of the same size, so logos of different proportions line up. The image is scaled to fit inside the box without cropping.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Component Width	25% … 100%	100%	See Component Width.
Force Full Width	Yes / No	No	When Yes, the strip breaks out of the content column and scrolls across the whole browser window (Component Width is then ignored).
Show tooltip	Yes / No	Yes	Shows the item Title and Subtitle in a small bubble when the pointer rests on a logo.
Box width (px) / Box height (px)	number	160 / 80	Size of the box each logo is fitted into. Increase both for a bigger strip (the example uses 320×160 for the full-width variant).
Column Gap	0 … 60px	8px	Space between boxes.
Pause on Hover	Yes / No	Yes	Stops the scrolling while the pointer is over the strip so visitors can click a logo.
Hover effect	None, Reveal color, Scale up, Scale up + Reveal color	None	Reveal color shows the logo in grayscale and switches to color on hover (or to the Logo (custom color) image if one is uploaded). Scale up enlarges the logo slightly.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Infinite Logos Item fields

Field	Required	What it does
Title	yes	Name of the organisation; first line of the tooltip and the image’s alternative text.
Subtitle	no	Second line of the tooltip (for example “Gold sponsor”).
Logo	no	The image shown in the strip. Transparent PNG or SVG-like PNG/WebP works best.
Logo (custom color)	no	Alternative image shown on hover with the Reveal color effects — for example a full-color version when the main Logo is monochrome.
Link	no	URL opened when the logo is clicked.
Description (internal)	no	Editor note; never shown.
Custom Class	no	Extra CSS class on this logo.

How to use it

1. Click Add Infinite Logos; type a Section Title such as “Our sponsors”.
2. Choose the Box width and Box height. Logos are scaled to fit, so pick a box slightly wider than tall for typical logos.
3. Pick a Hover effect and leave Pause on Hover on if the logos are linked.
4. Click Add new Infinite Logos Item for each logo: Title, Logo image, Link; optionally Subtitle and a custom-color image. Click Create.
5. Save and watch the strip. If it does not move, add more items — the loop only scrolls when the logos are wider than the available space.

Tips

• Prepare all logos with the same padding around the mark so they look the same size in the boxes.
• Force Full Width looks best on pages without sidebars; combine it with a container background color to create a band across the page.
• Keep the tooltip on when logos are linked; it tells visitors where the click leads.

For site builders

Item	Value
Module	apb_pb_infinite_logos
Paragraph types	apb_pb_infinite_logos, apb_pi_infinite_logos
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Image / Link / Options / Taxonomy / Text
Own vocabulary	apb_tax_hover_effect (none, reveal_color, scale_up, scale_up_reveal_color)
Shared vocabularies	apb_tax_column_gap, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_infinite_logos/frontend: Embla carousel with auto-scroll and Tippy tooltips (both from aero-page-builder-core), configured from data-apb-*.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-infinite-logos

The Links component turns a plain list of links into a grid of rich entries. Each entry has a title, an icon, and optionally a thumbnail and text before and after it. An entry can point to a web address, download a file, play a video in a lightbox, or open extra content in an overlay — or have no link at all and simply present information.

What it is for

Use Links for resource lists (documents, forms, related sites), call-to-action buttons, download areas, video lists, or “learn more” panels that open in an overlay so the page stays short. It is the most flexible list component in APB.

The example page APB Links shows each display type and each link type.

Structure

• The Links component sets the Display type (list styles or buttons), the grid and the base color.
• Link Items — one per entry. The item’s Link type decides which fields matter: a URL, a File, a Video or an overlay Body.

Component settings

Setting	Options	Default	What it does
Section title / Show section title / Intro	—	— / No / empty	See Section Title and Intro Text.
Target placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Display type	Type 1, Type 2, Type 3, Type 4, Button, Button rounded	Type 1	How each entry is framed — see below.
Color style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	Blue	Color of titles, icons and buttons; each entry can override it. See Color Style.
Columns	1 … 10	2	Entries per row. See Columns and Column Gap.
Column gap	0 … 60px	16px	Space between entries.
Width	25% … 100%	100%	See Component Width.
Custom class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Display types

• Type 1 — plain entries: icon and title, thumbnail and texts, no frame.
• Type 2 — a thin line under each entry.
• Type 3 — a thin box around each entry.
• Type 4 — a rounded box with a thicker right and bottom edge (a “card” look).
• Button and Button rounded — each entry becomes a solid button in the palette color, with square or rounded corners. Thumbnails and descriptions are usually left empty in this mode.

Link Item fields

Field	Required	What it does
Title	yes	The clickable text of the entry.
Link type	yes	URL — opens the Link. File — downloads or previews the File. Content Overlay — opens the Body in an overlay window. Video — plays the Video in a lightbox. No Link — title only. The editor shows only the fields relevant to the chosen type, and refuses to save an item whose required field for that type is empty.
Link	for URL	Internal or external address, with optional link text.
File	for File	PDF, Office documents, archives, images, SVG or MP4. Images and PDFs open in a lightbox; other files download.
Video	for Video	A media item: an uploaded video or a YouTube/Vimeo URL.
Body	for Content Overlay	Rich text shown in the overlay.
Before description / After description	no	Rich text shown above / below the title inside the entry (for example a category label above and a summary below).
Thumbnail	no	Image for the entry; shown when Show thumbnail is Yes.
Show icon	yes (Yes)	Displays an icon next to the title. Without a custom Icon, a default one is used per link type (link, file, video, overlay).
Icon	no	Font Awesome classes, for example fas fa-file-pdf, to replace the default icon.
Show thumbnail	yes (No)	Displays the Thumbnail.
Photo position	yes (Top)	Where the thumbnail sits relative to the text: Left, Right, Top, Top Center, Bottom, Bottom Center, or the two Card layouts (image bleeding to the edge of the frame).
Photo Orientation	yes (Landscape)	Crop of the thumbnail: Landscape, Portrait, Square or Circular.
Color style (row)	no	Overrides the component color for this entry.
Admin description / Custom class	no	Editor note (never shown) / extra CSS class.

How to use it

1. Click Add Links, set a Section title, choose a Display type and the number of Columns.
2. Click Add new Link Item. Type the Title, pick the Link type, and fill the field it requires (Link, File, Video or Body).
3. Optionally add a Thumbnail (set Show thumbnail to Yes and choose position and orientation) and a short After description.
4. Click Create and repeat for each entry. Drag to reorder.
5. Save and click through every entry to confirm that files download, videos play and overlays open.

Tips

• For a row of call-to-action buttons, use Button rounded, one column per button, and no thumbnails. Override the color of the most important button.
• Content Overlay is a good way to attach a long explanation to a list entry without a separate page. For overlays triggered from a link inside your own text, use Overlay Content instead.
• Icons come from the Font Awesome library; look up the class name on fontawesome.com and paste it into Icon.
• A simpler list with icons and no thumbnails or overlays is also available as Special List.

For site builders

Item	Value
Module	apb_pb_links
Paragraph types	apb_pb_links, apb_pi_links
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Link Attributes, Field Formatter Class, Taxonomy Machine Name, Font Awesome, Crop, Image Widget Crop, core Media / File / Image / Link / Filter / Options / Taxonomy / Text; media types video and remote_video (shipped by apbuilder)
Own vocabularies	apb_tax_li_display, apb_tax_li_link_type, apb_tax_li_photo_position, apb_tax_li_thumb_orientation; crop types and image styles apb_links_landscape / _portrait / _square (+ video variants)
Shared vocabularies	apb_tax_cs_01, apb_tax_columns, apb_tax_column_gap, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_links/frontend (+ Font Awesome webfonts): GLightbox for files, videos and overlays; overlay bodies are fetched from /apb/links/overlay/{paragraph}. Item admin JS shows/hides fields per link type.
Container settings	Full profile.
Example page	/apb/apb-links

Overlay Content holds pieces of content that are invisible on the page until a link opens them in an overlay window: a video with an introduction, a long explanation, a form of words you do not want in the main flow. You create the link yourself, anywhere in your text, and connect it to the item by a short Trigger ID.

What it is for

Use it when a page needs “more” behind a word or a button without navigating away: a tutorial video behind “Watch the video”, speaker details behind a name, a definition behind a term. Because the trigger is an ordinary link, it can live in the page Body, in a Simple Content text, in a menu, or in another component’s rich text.

See it live on the example page APB Overlay Content, which also lists the steps summarised below.

Structure

• The Overlay Content component is a container with only a Section Title (for your own reference; the component renders nothing visible).
• Overlay Video Items — one per overlay. Each has a Trigger ID, a Title, an optional Video and two optional text blocks (before and after the video).
• A trigger link — any link on the same page whose address is # followed by the Trigger ID, for example #about-us-video.

The component is deliberately simple: it has no layout settings, no width, no container settings and no placement — it does not occupy space on the page.

Component settings

Setting	What it does
Section Title	Label for editors; not shown to visitors.
Overlay Content Items	The list of overlays.

Overlay Video Item fields

Field	Required	What it does
Trigger ID	yes	A short identifier without spaces or special characters (letters, digits, - and _), typed without the #. It must be unique on the page. Example: about-us-video.
Title	yes	Heading of the overlay. It is displayed only when Text Before or Text After is filled in; a video-only overlay shows just the player.
Overlay Video	no	A media item: uploaded video or YouTube/Vimeo URL. Leave empty for a text-only overlay.
Text Before	no	Rich text shown above the video.
Text After	no	Rich text shown below the video.

How to use it

1. Decide on a Trigger ID, for example campus-tour.
2. In the text where the overlay should open from, insert a link and set its URL to #campus-tour (with the #).
3. In the Page Builder, click Add Overlay Content (one per page is enough; it can hold many items).
4. Click Add new Overlay Video Item. Type campus-tour as the Trigger ID, a Title, and add the Video and/or texts. Click Create.
5. Save the page and click the link: the overlay opens; the × button or a click outside closes it.

Tips

• Trigger IDs are case-sensitive and must match exactly; if nothing opens, compare the link address and the ID letter by letter.
• Several links can point to the same Trigger ID.
• Remote videos start when the overlay opens and stop when it closes. Uploaded videos need a poster image on the media item to look good before play.
• For overlays attached to entries of a list, the Links component (Content Overlay link type) needs no manual link.

For site builders

Item	Value
Module	apb_pb_overlay_content
Paragraph types	apb_pb_overlay_content, apb_pi_overlay_video
Requires	apbuilder, apb_pb_video (shares the video item field), Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Media, Media Library, Text; media types video and remote_video
Front-end	apb_pb_overlay_content/frontend: each item renders a hidden inline panel; clicks on a[href="#trigger-id"] open it with GLightbox. JSON for integrations: /apb/overlay-content/item/{paragraph}.
Container settings	None (by design, v1 parity).
Example page	/apbuilder_examples/apb-overlay-content

Profiles is a grid of people cards. Each card shows a photo, the person’s name, position and company, contact details and social links; a Read more button opens the full biography in a pop-up. The photo can sit on any side of the card and be cropped as landscape, portrait, square or circle.

What it is for

Staff pages, boards and committees, speaker line-ups, award winners — any list of people where a consistent card per person is wanted. Unlike a free-form text page, all cards stay aligned and the layout can be changed later in one place.

See it live on the example page APB Profiles, which shows several photo positions.

Structure

• The Profiles component sets the grid, the photo position and orientation, and the palette.
• Profile items — one per person, with identity, contact, biography and links.
• Social media links — a small list nested inside each profile item (network + URL), rendered as icons.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	Black	Color of names, icons and the button; each card can override it. See Color Style.
Photo Position	Left, Right, Top, Top Center, Bottom, Bottom Center, Card 1, Card 2	Left	Where the photo sits relative to the text. Top Center / Bottom Center also center the text; Card 1 and Card 2 are boxed layouts with the photo bleeding to the edge.
Photo orientation	Landscape, Portrait, Square, Circular	Portrait	Which crop of the photo is shown. Circular uses the square crop in a circle.
Columns	1 … 10	3	Cards per row. See Columns and Column Gap.
Column Gap	0 … 60px	32px	Space between cards.
Component Width	25% … 100%	100%	See Component Width.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Profile item fields

Field	Required	What it does
Name	yes	Displayed as the card heading.
Position / Company	no	Two lines under the name.
Photo	no	PNG, GIF, JPG or WebP; adjust the landscape, portrait and square crops after uploading.
Phone / Email	no	Shown with icons; the email is a mail link.
Additional info	no	Rich text shown on the card under the contact details (for example office hours).
Bio	no	Full biography. It is not on the card; it opens in the pop-up when the visitor clicks the More button. The button appears only when a Bio exists.
More Button Label	no	Text of that button (default “Read more”).
Profile page URL	no	If the person has a page of their own, its address; a view profile link is added to the card.
Social links	no	One row per network: Title (for screen readers), Network (Facebook, Instagram, LinkedIn, Twitter) and URL.
Card color override	no	Palette for this card only.
Description / Custom card class	no	Editor note (never shown) / extra CSS class.

How to use it

1. Click Add Profiles, set the Section Title (for example “Board of directors”).
2. Choose Photo Position and Photo orientation. Top + Square or Circular gives compact cards; Left + Portrait gives wider cards with more text room.
3. Set Columns to match: 4–5 for compact cards, 2–3 for wide ones.
4. Click Add new Profile item; type the Name, Position and Company, upload the Photo and check its crops, add contact details and the Bio. Add Social links if wanted. Click Create.
5. Repeat for each person, drag to order them, and save.

Tips

• Use photos with the face roughly centered; the square/circular crop is taken from the middle unless you adjust it.
• Keep the card text short and put everything else in the Bio; the pop-up scrolls, the card does not.
• Profile items can be reused on several pages with Add existing: update the person once and every page follows.
• For a list of people without photos, Special List or a plain table may be simpler.

For site builders

Item	Value
Module	apb_pb_profiles
Paragraph types	apb_pb_profiles, apb_pi_profile, apb_pi_profile_social_media
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Crop, Image Widget Crop, Font Awesome, Taxonomy Machine Name, core Image / Link / Options / Taxonomy / Text
Own vocabularies	apb_photo_position, apb_profile_social_media; crop types and image styles apb_profile_landscape / _portrait / _square
Shared vocabularies	apb_tax_orientation_2 (adds Circular), apb_tax_cs_01, apb_tax_columns, apb_tax_column_gap, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_profiles/frontend: GLightbox pop-up with the bio; modal payload embedded per card (also available at /apb/profiles/modal/{paragraph}). Reference (tier A) implementation for new components.
Container settings	Full profile.
Example page	/apb/apb-profiles

Read More shows the beginning of a long text — up to a height you choose — and a View More button. Clicking the button reveals the rest; a View Less button folds it back. It keeps long articles, policies or descriptions from dominating the page while leaving them one click away.

What it is for

Use it for content that must be on the page in full (for legal or search reasons) but that most visitors will only skim: a detailed programme, a long “about” text, terms, methodology notes. Several Read More blocks can follow each other, each with its own title.

See it live on the example page APB Read More.

Structure

• The Read More component carries the shared settings (section title, width, placement, container).
• Read More Items — one per collapsible text. Each item decides its own collapsed height, button labels and color, so one component can hold several blocks with different settings.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title	text; No / Yes	— / No	See Section Title and Intro Text. This component has no Intro Text; use the item Body instead.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Component Width	25% … 100%	100%	See Component Width.
Custom Class / Access Control	—	—	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Read More Item fields

Field	Required	What it does
Title	yes	Heading of the block; displayed only when Show Title is Yes (it is always used in the editor).
Show Title	yes (No)	Whether the Title appears above the text.
Body	yes	The full text (rich text).
Collapsed Height	yes (200px)	0px … 400px in 50px steps: how much of the Body is visible before the button. 0px hides the whole text behind the button. If the text is shorter than this height, no buttons are shown and the text appears in full.
Color Style	yes (Blue)	Color of the buttons (second palette: Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow). See Color Style.
More Link Text / Less Link Text	yes	Labels of the two buttons (default “View More” / “View Less”). Translate or adapt them: “Show full programme”, “Hide”.
Description (internal) / Custom Class	no	Editor note (never shown) / extra CSS class.

How to use it

1. Click Add Read More and set a Section Title.
2. Click Add new Read More Item. Paste or write the full text in Body.
3. Pick a Collapsed Height that ends after the first paragraph or two — enough to show what the text is about.
4. Adjust the button labels and color, then click Create.
5. Save and test: the text should fade out at the chosen height and expand on click.

Tips

• Choose the collapsed height so the cut does not fall in the middle of an image or a heading.
• For several independent sections with titles, an Accordion is often clearer than a stack of Read More blocks.
• Search engines and screen readers see the complete text; Read More only changes what is visible.

For site builders

Item	Value
Module	apb_pb_read_more
Paragraph types	apb_pb_read_more, apb_pi_read_more
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Entity Access by Role Field, core Options / Taxonomy / Text
Own vocabulary	apb_tax_rm_cpsd_height (0px … 400px)
Shared vocabularies	apb_tax_cs_02 (per item), apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_read_more/frontend: collapse/expand from data-apb-*; button colors injected as inline CSS per item.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-read-more

Simple Content is the layout component of APB. It draws a grid of one to several columns and lets you fill the cells with rich text, images (one image or a small slideshow), a background, or a Region — an empty slot into which any other component can be inserted. Most multi-column pages are built with it.

What it is for

Whenever the page body is not enough: text beside an image, two or three text columns, a colored band with a heading, an accordion next to a paragraph, a call-out box. Simple Content provides the columns; the items provide the content; other components plug into its regions.

See it live on the example page APB Simple Content. Several other example pages (Carousel, Image Gallery, Tabs) use it to place a component beside text.

Structure

The component defines the grid. Its items are placed into the grid cells in order, left to right, then next row. There are four item types:

Item type	Purpose
Content	A cell of rich text: headings, paragraphs, lists, inline images, links.
Images	A cell with one image or, when several are uploaded, a small slideshow of them, cropped to a chosen aspect ratio.
Region	An empty cell with an ID. Any component whose Target Placement matches that ID is moved into the cell.
Background	Not a cell in the usual sense: a color or image (optionally with parallax) applied behind the whole component, behind the items area, or as a colored block in one cell.

Item titles are for editors only; none of them is shown on the page. Give each item a descriptive title (“Left text”, “Region 1”) so the items table stays readable.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro Text	—	— / No / empty	Heading and intro above the grid. See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement. A Simple Content can itself be placed in the region of another Simple Content.
Columns	1 … 10	1	Number of equal columns. See Columns and Column Gap.
Template	No template; for 2 columns: 50/50, 33/67, 67/33, 25/75, 75/25; for 3 columns: 33/33/33, 25/25/50, 50/25/25, 25/50/25, 20/40/40; for 4 columns: 25/25/25/25, 33/22/22/22, 22/22/22/33	No template	Unequal column widths. Pick a template whose column count matches Columns; the numbers are percentages from left to right.
Column Gap	0 … 60px	0px	Space between cells.
Vertical Align	Stretch, Top, Center, Bottom, Inherit	Stretch	How cells of different heights line up in a row. Stretch makes all cells the same height (needed for background colors to fill the row); Center centers a short text beside a tall image.
Component Width	25% … 100%	100%	See Component Width.
Custom Class / Access Control	—	—	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings. For most backgrounds Container Settings is simpler than a Background item.

Item fields

Content

Field	Required	What it does
Title	yes	Editor label only.
Body	yes	The rich text of the cell.
Vertical Align	yes (Inherit)	Overrides the component alignment for this cell.
Padding	no (0px)	Inner space of the cell, 0–60px. Needed when the cell has a background color.
Grid Column Span	no (Auto)	Make the cell span 2–5 columns or the full width — for a heading row above two columns, for instance.
Background Color	no	Fill color of the cell.
Description (internal) / Custom Class	no	Editor note / extra CSS class.

Images

Field	Required	What it does
Title	yes	Editor label only.
Images	no	One or more images. One image is shown as is; two or more become a slideshow with arrows.
Aspect Ratio	yes (Landscape)	Landscape, Portrait or Square crop applied to every image in the cell (adjust the crops after upload).
Padding / Background Color / Custom Class	no	As for Content.

Region

Field	Required	What it does
Region ID	yes	The anchor other components target. To use the standard placements, type exactly internal-placement-1, internal-placement-2 or internal-placement-3; the inserted component then selects Internal Placement 1, 2 or 3 as its Target Placement.
Active Region	yes (on)	Switch the region off to keep the cell but stop receiving components.
Padding / Background Color	no	As for Content.

Background

Field	Required	What it does
Title	yes	Editor label only.
Background Type	yes (Content)	Section — behind the whole component including title and intro. Items — behind the grid only. Content — the item is itself a cell filled with the color/image (a colored block in the grid). Use at most one Section background per component.
Background Color / Background Image	no	Color and/or image. The image is scaled to cover.
Background Image Sizes	no (Large)	Which resized copy is loaded (Small … 2XL).
Height	yes (400px)	Minimum height of a Content-type background block (300px … 100vh).
Margin / Padding / Grid Column Span / Force Full Width	no	Spacing and span of the block; Force Full Width lets an Items background extend to the window edges.
Parallax, Orientation, Scale, Delay	no	Moves the background image slowly as the page scrolls (Up/Down/Left/Right); Scale enlarges the image so it has room to move, Delay smooths the motion.

How to use it

Text beside an image:

1. Click Add Simple Content. Set Columns to 2 and, if you want the image narrower, Template 67/33.
2. Click Add new APB SC Content, write the text, click Create.
3. Click Add new APB SC Images, upload the image, choose the Aspect Ratio, click Create.
4. Set Vertical Align to Center and save.

Inserting another component in a column:

1. In the Simple Content, add a Region item with Region ID internal-placement-1.
2. Add the other component (Tabs, Accordion, Carousel, …) to the Page Builder as usual.
3. In that component, set Target Placement to Internal Placement 1. Save: the component now renders inside the region cell.

Tips

• Item order equals cell order. Drag items to swap columns; no need to re-enter content.
• On small screens columns stack vertically in item order — put the most important cell first.
• Use Grid Column Span: Full Width on a Content item to add a heading row above a multi-column grid.
• Each Region ID can be used once per page; with three standard IDs you can host three inserted components per page. Any other unique ID also works if a designer targets it explicitly.
• Prefer Container Settings backgrounds for a plain band; use a Background item when you need parallax, a block inside the grid, or a background limited to the items area.

For site builders

Item	Value
Module	apb_pb_simple_content
Paragraph types	apb_pb_simple_content; items apb_pi_sc_content, apb_pi_sc_images, apb_pi_sc_region, apb_pi_sc_background
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Crop, Image Widget Crop, Better Formats, Color Field, Entity Access by Role Field, Field Formatter Class, Taxonomy Machine Name, core Image / Options / Taxonomy / Text
Own vocabularies	apb_tax_sc_template, apb_tax_sc_vertical_align, apb_grid_column_span, apb_image_sizes; crop types apb_image_landscape / _portrait / _square; image styles apb_image_* and apb_simple_content_bg_sm … _2xl
Shared vocabularies	apb_tax_columns, apb_tax_column_gap, apb_tax_width, apb_tax_target_placement, apb_tax_orientation, apb_tax_padding, apb_tax_margin, apb_tax_min_height
Front-end	apb_pb_simple_content/frontend: grid and template classes, Splide for image cells, simpleParallax for backgrounds, all driven by data-apb-sc-*. Region items render <div id="{Region ID}">, which core apb-placement.js uses as the placement target.
Container settings	Full profile on the component; cell backgrounds come from the items (apb_pi_sc_background), not from the shared container system.
Example page	/apbuilder_examples/apb-simple-content

A Slideshow is a set of large banners shown one at a time. Each slide has a background (image or video, with optional color overlay) and a block of text positioned over it, with its own entrance effect and an optional link. It is the component for hero areas, announcements and calls to action.

What it is for

Use it at the top of a home or landing page, or to introduce a section with a strong visual. Unlike a Carousel, a Slideshow shows a single slide at a time and is designed around text over the image.

See it live on the example page APB Slideshow, which includes a background-video slide.

Structure

• The Slideshow component sets the height, the navigation style and whether the slides span the full window width.
• Slides — one per banner. A slide has three layers: the background (image or video) with an optional slide overlay color, and the content box (title, body, link) with its own optional background color, position, width and effect.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro	—	— / No / empty	See Section Title and Intro Text. Usually left hidden for hero slideshows.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement. Top region puts the slideshow above the page title.
Min Height	300px … 700px, 50vh … 100vh	400px	Minimum height of every slide. Values in vh are a share of the window height (100vh = a full screen).
Navigation	None, Bullet over Slides, Bullet under Slides, Thumbnail	None	How visitors move between slides: no controls (autoplay only), dots on or below the slides, or small thumbnails of each slide.
Force Full Width	Yes / No	No	Stretch the slides to the edges of the browser window, ignoring the content column.
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	— (required)	Color of arrows, bullets and links. See Color Style.
Component Width	25% … 100%	100%	See Component Width; ignored when Force Full Width is Yes.
Custom Class / Access Control	—	—	See Advanced settings.
Container Settings	padding and margins only	32px bottom margin	The Slideshow keeps its own backgrounds per slide, so only Padding and Margins are offered.

Slide fields

Content and layout (Setup / Content / Link)

Field	Required	What it does
Title	yes	Heading of the content box.
Body	no	Rich text under the heading (keep it to a few lines).
Link	no	URL opened when the slide is clicked.
Type	yes (Horizontal full)	Boxed — the content box is a compact panel of the chosen Content Width, placed with the two position settings. Horizontal full — the box is a band across the whole slide width (text aligned by Horizontal Position). Vertical full — the box is a column as tall as the slide (placed by Horizontal Position).
Horizontal Position / Vertical Position	yes (Center / Center)	Where the content box sits on the slide: Left/Center/Right and Top/Center/Bottom.
Content Width	yes (1100px)	Maximum width of the content box, 300px … 1200px.
Margin / Padding	yes (0px / 30px)	Space outside / inside the content box.
Effects	no (None)	Entrance animation of the content box: Fade In, Fade In Bottom/Left/Right/Top, Zoom In.
Text shadow	yes (No)	Soft shadow behind the text for readability over photos.
Description / Custom Class	no	Editor note (never shown) / extra CSS class.

Background Image / Background Video

Field	What it does
Background Image	Photo behind the slide (PNG, GIF, JPG, WebP); adjust the crop after upload. Used when there is no video, and as the fallback while a video loads.
Background Video	An uploaded video (media) played muted in a loop behind the slide on desktop screens.
Background Video Mobile	A lighter video (uploaded or YouTube/Vimeo) used on small screens instead of the desktop one.

Background Slide and Background Content

Two independent color layers, each with the same controls:

Field	What it does
Overlay / Background Color	The main color. Background Slide tints the whole slide over the image; Background Content fills the content box.
Opacity	0–100% transparency of that color (in 5% steps).
Gradient, Secondary, Opacity, Orientation	Turn the single color into a gradient towards the Secondary color, running Vertical or Horizontal.

How to use it

1. Click Add Slideshow. Set Min Height (for a hero: 60vh–80vh), Navigation and, for a page-wide banner, Force Full Width = Yes and Target Placement = Top region.
2. Click Add new Slide. Upload the Background Image and adjust its crop.
3. Type the Title and Body. Choose the Type and positions: for a classic hero, Boxed, Left, Center, Content Width 600px.
4. Give the content box a background: Background Content color with 70–85% opacity, or leave it transparent and enable Text shadow.
5. Optionally add an Effect and a Link. Click Create, repeat for other slides, and save.

Tips

• Use images at least 1920px wide for full-width slideshows; check the crop on a narrow window too.
• Keep videos short and small (a few MB); always add a Background Image as fallback and a mobile video or none for phones.
• A dark Background Slide overlay at 30–50% opacity makes white text readable on almost any photo.
• One slide is a perfectly valid slideshow: it is the easiest way to make a hero banner with text over an image.

For site builders

Item	Value
Module	apb_pb_slideshow
Paragraph types	apb_pb_slideshow, apb_pi_slideshow
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Better Formats, Color Field, Crop, Image Widget Crop, Taxonomy Machine Name, core Media / Image / Link / Options / Taxonomy / Text; media types video and remote_video
Own vocabularies	apb_tax_ss_type, apb_tax_ss_navigation, apb_tax_ss_effects, apb_tax_content_width; crop type apb_slideshow; image styles apb_slideshow, apb_video_thumb
Shared vocabularies	apb_tax_min_height, apb_tax_margin, apb_tax_padding, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_slideshow/frontend: Splide (fade/slide, thumbnails), WOW/animate effects, video backgrounds with mobile switch; slide settings exposed as data-apb-ss-*.
Container settings	Spacing-only profile (padding + margin); no border, background or media.
Example page	/apb/apb-slideshow

A Special List is a grid of short entries, each with an icon, a title and a description. The title can be plain, link to a web address or download a file. It is the quickest way to turn a bullet list into something visual.

What it is for

Benefits and features (“Why join”), steps of a process, contact channels, downloadable forms, key facts with icons. When the entries need thumbnails, overlays or videos, use Links instead; when they need images as the main element, use Feature Box.

See it live on the example page APB Special Lists.

Structure

• The Special List component sets the grid, the base color and an optional Body text shown above the entries.
• Special List Items — one per entry: title, description, icon, and the link type.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title	text; No / Yes	— / No	See Section Title and Intro Text.
Body	rich text	empty	Introduction shown between the title and the grid (this component uses Body rather than Intro Text).
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Columns	1 … 10	3	Entries per row. See Columns and Column Gap.
Column Gap	0 … 60px	30px	Space between entries.
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	Black	Color of titles and icons; each entry can override it. See Color Style.
Component Width	25% … 100%	100%	See Component Width.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Special List Item fields

Field	Required	What it does
Title	yes	Heading of the entry; becomes the link when Type is Link or File.
Title Style	no (Yes)	Whether the title is shown in the palette color and larger. No renders it as normal text.
Description	no	Rich text under the title.
Type	yes (No Action)	No Action — plain entry. Link — the title opens the Link. File — the title downloads the File.
Link	for Link	Internal or external address.
File	for File	PDF, Office documents, archives, images or text files.
Icon	no	Font Awesome classes, for example fas fa-rocket or far fa-file-pdf. Leave empty for no icon.
Icon Position	no (Left)	Left, Right, Top or Bottom of the text.
Icon Size	no (Normal)	Small, Normal, Medium, Large, Extra Large.
Color Style	no	Overrides the component color for this entry.
Internal Description / Custom Class	no	Editor note (never shown) / extra CSS class.

How to use it

1. Click Add Special List; set the Section Title and the number of Columns.
2. Click Add new Special List Item. Type the Title and Description.
3. Choose the Type; add the Link or File it needs.
4. Paste an Icon class from fontawesome.com and pick its position and size. Click Create.
5. Repeat, drag to order, save.

Tips

• Use the same icon position and size in all entries of one list; vary the color instead if you want emphasis.
• Icons on Top with Large size and 3–4 columns give the classic “features” row; icons on the Left with Small size suit longer descriptions.
• Use the same number of entries as columns, or a multiple of it.

For site builders

Item	Value
Module	apb_pb_special_list
Paragraph types	apb_pb_special_list, apb_pi_special_list
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, Font Awesome, core File / Link / Options / Taxonomy / Text
Shared vocabularies	apb_tax_columns, apb_tax_column_gap, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_special_list/frontend (+ Font Awesome webfonts); item colors injected as inline CSS; links resolved in the active content language.
Permissions	Install grants view to anonymous and authenticated users only; grant create/update/delete on both bundles to your editor roles manually (see the release notes).
Container settings	Full profile.
Example page	/apbuilder_examples/apb-special-lists

Tabs split content into panels with a row (or column) of labels; only one panel is visible at a time. Visitors switch panels by clicking the labels. On narrow screens the tabs turn into a stacked accordion so nothing is lost on phones.

What it is for

Use Tabs when a topic has a few parallel facets that visitors compare or choose between: overview / schedule / venue, three membership levels, per-audience instructions. If visitors are likely to read everything in order, an Accordion or plain headings serve better.

See it live on the example page APB Tabs, which also shows Tabs inserted in a Simple Content column.

Structure

• The Tabs component sets the orientation, the panel height and the color.
• Tabs Items — one per tab: the label (Title) and the panel content (Body). The first item is the tab open when the page loads.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro Text	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Color Style	Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow	— (required)	Color of the active tab and its underline (second palette). See Color Style.
Orientation	Horizontal, Vertical	Horizontal	Labels in a row above the panel, or in a column at the left of it. Vertical suits long labels and many tabs.
Height	Auto, 240px … 640px, 40vh … 80vh	Auto	Fixed height of the panel area; longer content scrolls inside it. Auto lets each panel take its natural height, so the page may jump slightly when switching tabs.
Component Width	25% … 100%	100%	See Component Width.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Tabs Item fields

Field	Required	What it does
Title	yes	The tab label. Keep it to one or two words in horizontal orientation.
Body	yes	The panel content (rich text).
Description (internal)	no	Editor note; never shown.
Custom Class	no	Extra CSS class on this panel.

How to use it

1. Click Add Tabs; set a Section Title and a Color Style.
2. Choose the Orientation. Set a fixed Height when the panels have similar length and you want the page to stay still; keep Auto otherwise.
3. Click Add new Tabs Item; type the label as Title and the content as Body; click Create. Repeat per tab and drag to order — the first is selected by default.
4. Save and resize the browser window to check the accordion fallback on narrow screens.

Tips

• Three to six tabs is the comfortable range; beyond that, prefer Vertical orientation or an Accordion.
• Tabs are not linkable individually: a visitor arriving from a link always sees the first tab.
• To place Tabs beside a paragraph, insert them into a Simple Content region with Target Placement Internal Placement 1.

For site builders

Item	Value
Module	apb_pb_tabs
Paragraph types	apb_pb_tabs, apb_pi_tabs
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Options / Taxonomy / Text
Own vocabulary	apb_tax_tabs_height (Auto, 240px … 640px, 40vh … 80vh)
Shared vocabularies	apb_tax_cs_02, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_tabs/frontend: jQuery UI tabs built client-side with an accordion fallback below the mobile breakpoint; active-tab colors injected as inline CSS.
Permissions	Install grants view to anonymous and authenticated users only; grant create/update/delete on both bundles to your editor roles manually.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-tabs

The Video component places one or more videos on the page. Videos can be uploaded to the site or come from YouTube or Vimeo. A single video in a single column plays right on the page; several videos (or several columns) become a grid of thumbnails that open a player in a lightbox.

What it is for

Tutorials, recorded talks, testimonials, a promotional clip. Use one Video component per group of related videos; the grid keeps them compact and lets visitors pick which to watch.

See it live on the example page APB Video, which also shows a single inline video.

Structure

• The Video component sets the grid (columns, gap) and the palette.
• Video Items — one per video, each pointing at a media item (uploaded file or remote URL) with an optional title and caption.

The two display modes are chosen automatically: inline player when there is exactly one item and one column; thumbnail grid with lightbox otherwise. The number of columns therefore also controls the thumbnail size — a single video in a 3-column grid shows as a small thumbnail.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro Text	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Columns	1 … 10	3	Thumbnails per row; 1 with a single item plays inline. See Columns and Column Gap.
Column Gap	0 … 60px	30px	Space between thumbnails.
Color Style	Black, White, Teal Blue, Blue, Orange, Green, Red, Silver and Blue	— (required)	Color of captions and the play button. See Color Style.
Component Width	25% … 100%	100%	See Component Width. For an inline video, this is the easiest way to control the player size.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Video Item fields

Field	Required	What it does
Title	no	Caption above the description; also the lightbox title.
Video	no	A media item. Click Add media to upload an MP4 (media type Video) or paste a YouTube/Vimeo address (media type Remote video), or pick one already in the media library.
Description	no	Short caption under the thumbnail or player.
Description (admin)	no	Editor note; never shown.
Custom Class	no	Extra CSS class on this item.

How to use it

1. Click Add Video; set the Section Title and a Color Style.
2. For one video on the page: Columns = 1 and a Component Width of 60–80%. For a grid: Columns = 2–4.
3. Click Add new Video item, click Add media under Video, upload a file or paste a YouTube/Vimeo URL, and insert it. Add a Title and Description; click Create.
4. Repeat for other videos and save. Thumbnails for remote videos come from YouTube/Vimeo; for uploaded videos, set a thumbnail image on the media item.

Tips

• Prefer remote videos for anything longer than a minute; uploaded files are served by your site and slow it down.
• Give uploaded videos a good thumbnail in the media library; it is what visitors see in the grid.
• A video with text around it: use Overlay Content for a video behind a link, or a Simple Content region to place a Video component beside a paragraph.

For site builders

Item	Value
Module	apb_pb_video
Paragraph types	apb_pb_video, apb_pi_video
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Media, Media Library, Options, Taxonomy, Text; media types video (file) and remote_video (oEmbed), shipped by apbuilder
Own config	image style apb_pb_video_thumb
Shared vocabularies	apb_tax_columns, apb_tax_column_gap, apb_tax_cs_01, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_video/frontend: Video.js for inline file playback, oEmbed iframes for remote videos, GLightbox for the grid. apb_pb_overlay_content depends on this module for its video field.
Permissions	Install grants view to anonymous and authenticated users only; grant create/update/delete on both bundles to your editor roles manually.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-video

The Views component embeds a Drupal View — a dynamic list of content built by your site administrator, such as “latest news” or “upcoming events” — inside a Page Builder page. The list updates itself as content is published. You can show the View exactly as designed, or reshape its results into a grid of boxed cards.

What it is for

Whenever a page should contain content that lives elsewhere and changes over time: news teasers on a landing page, the next three events beside an intro text, a table of documents filtered by category. The other components hold content you type in; Views pulls content in automatically.

See it live on the example page APB Views, which embeds a table View as is and the same View as boxed cards.

Structure

This component has no items of its own: its content is the result of the selected View. It has three parts:

• The View field — which View and which of its displays to embed, plus a few overrides (title, header, items per page, offset, pager, argument).
• The Display type — View as Is or Boxed Card.
• The usual shared settings (title, intro, width, placement, container).

Component settings

Setting	Options	Default	What it does
View	a View + display	— (required)	Pick the View from the list, then its display (for example Block or Default). The View overrides below appear after choosing.
Section title / Display Section title / Intro Text	—	— / No / empty	See Section Title and Intro Text.
Target placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Display type	View as Is, Boxed Card	View as Is	View as Is renders the View with its own style (table, list, grid…) untouched. Boxed Card takes each result row and shows it as a card in an APB grid; it requires the View display to use the Unformatted list or HTML list style.
Number of columns	1 … 10	1	Boxed Card only. See Columns and Column Gap.
Column Gap	0 … 60px	20px	Boxed Card only; ignored with one column.
Boxed Card Border Settings	width per side, color, padding	none	Boxed Card only: border width for top/right/bottom/left, border color, and the padding applied on the sides that have a border.
Component width	25% … 100%	100%	See Component Width.
Custom class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

The columns, gap and border fields are shown in the editor only while Boxed Card is selected.

View overrides

Under the View selector you can adjust, without editing the View itself:

Override	What it does
Include View Title	Shows the View’s own title above the results (in addition to, or instead of, the Section title).
Hide header	Removes the View’s header area (for example a result counter or an intro).
Items per page	How many results to show (leave empty to keep the View’s setting).
Offset	Skip the first N results — useful to show items 2–4 when item 1 is featured elsewhere.
Pager	None, or the View’s pager (mini or full) when there are more results than shown.
Argument	A value passed to the View’s contextual filter, for example a category ID, so the same View can list different things on different pages.

How to use it

1. Ask your administrator which Views are available for embedding (they must be published Views with a suitable display).
2. Click Add Views; choose the View and display.
3. Keep View as Is when the View already looks right; switch to Boxed Card to lay the results out as cards, then set columns, gap and borders.
4. Adjust the overrides (items per page, pager, title/header) and save.
5. Check the page. If Boxed Card shows an error, the View display uses a style it cannot split into rows — switch back to View as Is or ask for an unformatted display.

Tips

• In View as Is, the APB columns and gap do not apply; the View’s own style decides the layout.
• Pager links reload the page; place a paged View where the reload is not disruptive (not inside a Tabs panel).
• Combine with a Section title and Container Settings to give the embedded list the same look as the other components on the page.

For site builders

Item	Value
Module	apb_pb_views (lifecycle: experimental)
Paragraph type	apb_pb_views (no item bundle)
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Field Group, Views Reference (viewsreference ^2.0), core Views / Taxonomy / Text
Own config	vocabulary apb_tax_vw_display_type (view_as_is, boxed_card); fields field_apb_vw_view (viewsreference), field_apb_vw_display_type_tx, field_apb_vw_boxed_border (JSON via the apb_views_boxed_border widget)
Shared vocabularies	apb_tax_columns, apb_tax_column_gap, apb_tax_width, apb_tax_target_placement
Rendering	ViewsRowBuilder executes the View at render time: View as Is uses buildRenderable(); Boxed Card themes each result row as apb_vw_item. Border CSS is scoped inline; output is cached per content language. Editor JS (form_admin) toggles the Boxed Card fields.
Known caveat	On viewsreference beta installs the schema must be at 8103 (apb_pb_views_update_10003 handles it) to avoid failing legacy updates.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-views (source rows: content type apb_views_example)