Feature Box

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