Live example

Feature Box is a grid of cards. Seven display types change how image, title, body, and button stack. Each card can override color style and text shadow. Height is a token, not a min-height — copy can clip if the token is too small.

Use it for a set of destinations or features with images. Prefer Simple Content when the band is a free layout (50/50, 25/75, four columns of mixed items). Prefer Special List for icon-led rows without large images.

Overview

APB-DOCS-COMP-FEATUREBOX

Feature Box is a grid of cards. Seven display types change how image, title, body, and button stack. Each card can override color style and text shadow. Height is a token, not a min-height — copy can clip if the token is too small.

Use it for a set of destinations or features with images. Prefer Simple Content when the band is a free layout (50/50, 25/75, four columns of mixed items). Prefer Special List for icon-led rows without large images.

Adding the component

Click Add Feature Box. Choose display type (Type 1–7), columns, gap, height, orientation, and color style. Add items with title, body, image, and a link or button. Save.

Component configuration

Parent bundle apb_pb_feature_box (Feature Box). Shared fields (section title, placement, width, custom class, intro, container settings, access control) are documented once. Component-specific fields are listed in full from the live Field API dump dated 2026-09-03T03:15:35+00:00.

Container settings sections: padding, margin, border, background. Shared defaults and the validator regex are on Shared settings.

FieldLabelTypeRequiredAccepted valuesDefaultNotes
field_apb_pb_container_settingsContainer settingstext_longnoemptyShared. See Shared settings.
field_apb_pb_container_bg_mediaBackground mediaentity_referencenoentity: media (image, video, remote_video)emptyShared. See Shared settings.
field_apb_section_titleSection TitlestringnoemptyShared. See Shared settings.
field_apb_feature_box_itemsFeature Box Itemsentity_reference_revisionsyesentity: paragraph (apb_pi_feature_box)empty
field_apb_show_section_titleShow Section Titlelist_stringyesno=No</code>, <code>yes=Yes[{"value":"no"}]Shared. See Shared settings.
field_apb_pb_introIntro Texttext_longnoemptyShared. See Shared settings.
field_apb_target_placementTarget Placemententity_referenceyescurrent_position</code>, <code>main_content_no_container</code>, <code>main_content_top</code>, <code>main_content_bottom</code>, <code>presentation_region</code>, <code>sidebar_top</code>, <code>sidebar_bottom</code>, <code>internal_placement_1</code>, <code>internal_placement_2</code>, <code>internal_placement_3[{"target_id":52}]Shared. See Shared settings and Target placement.
field_apb_fb_display_type_txDisplay Typeentity_referenceyestype_1</code>, <code>type_2</code>, <code>type_3</code>, <code>type_4</code>, <code>type_5</code>, <code>type_6</code>, <code>type_7[{"target_id":122}]
field_apb_columns_txColumnsentity_referenceyes1_column</code>, <code>2_columns</code>, <code>3_columns</code>, <code>4_columns</code>, <code>5_columns</code>, <code>6_columns</code>, <code>7_columns</code>, <code>8_columns</code>, <code>9_columns</code>, <code>10_columns[{"target_id":19}]
field_apb_column_gap_txColumn Gapentity_referenceyes0px</code>, <code>4px</code>, <code>5px</code>, <code>8px</code>, <code>10px</code>, <code>15px</code>, <code>16px</code>, <code>20px</code>, <code>24px</code>, <code>25px</code>, <code>30px</code>, <code>32px</code>, <code>40px</code>, <code>48px</code>, <code>56px</code>, <code>64px[{"target_id":37}]
field_apb_fb_height_txHeightentity_referenceyes100px</code>, <code>150px</code>, <code>200px</code>, <code>225px</code>, <code>250px</code>, <code>275px</code>, <code>300px</code>, <code>325px</code>, <code>350px</code>, <code>375px</code>, <code>400px</code>, <code>450px</code>, <code>475px</code>, <code>500px[{"target_id":135}]
field_apb_orientation_txOrientationentity_referenceyeslandscape</code>, <code>portrait</code>, <code>square[{"target_id":43}]
field_apb_color_style_01Color Styleentity_referenceyesblack</code>, <code>white</code>, <code>teal_blue</code>, <code>blue</code>, <code>orange</code>, <code>green</code>, <code>red</code>, <code>silver_and_blue[{"target_id":4}]
field_apb_width_txComponent Widthentity_referenceyes25_</code>, <code>33_</code>, <code>40_</code>, <code>50_</code>, <code>60_</code>, <code>66_</code>, <code>70_</code>, <code>75_</code>, <code>80_</code>, <code>90_</code>, <code>100_[{"target_id":72}]Shared. See Shared settings.
field_apb_custom_classCustom ClassstringnoemptyShared. See Shared settings.
field_access_controlAccess Controlentity_access_by_role_fieldnoemptyShared. See Shared settings.

Component items

APB Feature Box Item apb_pi_feature_box

field_apb_pi_desc is the Inline Entity Form autocomplete label. It is not rendered on the front end.

FieldLabelTypeRequiredAccepted valuesDefaultNotes
field_apb_pi_bodyBodytext_longnoempty
field_apb_pi_titleTitlestringnoempty
statusPublishedbooleanno[{"value":true}]
field_apb_pi_descDescription (internal)stringnoempty
field_apb_pi_fb_imageImageimagenoentity: fileempty
field_apb_pi_fb_buttonButtonlinknoemptyOptional button link displayed on the card.
field_apb_pi_color_style_01Color Styleentity_referencenoblack</code>, <code>white</code>, <code>teal_blue</code>, <code>blue</code>, <code>orange</code>, <code>green</code>, <code>red</code>, <code>silver_and_blueemptyOverride parent color scheme for this item.
field_apb_pi_fb_linkLinklinknoemptyFull-card link overlay (invisible, makes entire card clickable).
field_apb_pi_fb_text_shadowText Shadowlist_stringnoyes=Yes</code>, <code>no=No[{"value":"no"}]
field_apb_pi_custom_classCustom Classstringnoempty

Examples

Live working examples are on the demo site. Open https://demo.apb.aero.net/components/feature-box for configurations of this component. That page links back here as View documentation.