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)