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