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