Team Members

The Team Members element presents the people behind a business as a grid or a carousel, with a photo, a role, a short bio, a link and social profiles for each person. An optional filter lets visitors narrow a large team down to one department.

Adding the element

Add an element in the YOOtheme Pro builder and pick Team Members from the Planckie Elements group. The builder starts you with three example people so the layout is visible immediately.

The element draws no CSS or JavaScript of its own. Everything it renders is UIkit, which YOOtheme Pro already loads, so adding a team to a page costs nothing beyond the images.

Content

Option	Description
Items	The people.
Show the name	Hides or shows that part across every person.
Show the role	As above.
Show the bio	As above.
Show the image	As above.
Show the link	As above.
Show the social icons	As above.

The switches hide content without deleting it, so you can try a leaner card and switch the parts back on unchanged.

Team member items

Option	Description
Name	The person's name.
Role	Job title or function.
Bio	A short paragraph.
Image	Portrait, with its own alt text and focal point.
Link	Where the person's card leads, with its own text and ARIA label for this one item.
Department	A comma-separated list, for example Engineering, Marketing. This is what the filter navigation is built from, and one person can belong to several departments.
Social Icons	The person's profiles, added as items.
Style	Overrides the panel style for this person.

Social icon items

Option	Description
Link	The profile address. A matching UIkit brand icon is chosen automatically where one exists. mailto: and tel: links work too.
Link ARIA Label	A name for the link, since the icon carries no text.
Icon	An alternative icon from the icon library, when the automatic one is wrong or missing.
Image	An alternative SVG from the media manager. Set either an icon or an image, not both.

A social item only renders when its link uses http, https, mailto or tel. Anything else is dropped rather than rendered as a dead icon.

Settings

Display

Display Mode decides everything below it: Grid lays the people out in columns, Carousel puts them in a UIkit slider. Groups that do not apply to the chosen mode disappear from the panel.

Grid and columns

Column Gap, Row Gap, Divider and Alignment, plus a column count per breakpoint under Columns — Phone Portrait through Large Screens, each a fixed number or Auto. Defaults are one column on phones and three from tablet landscape up.

Masonry packs cards of different heights without gaps, and Parallax moves the columns at different speeds while scrolling. Both belong to the grid and are ignored in carousel mode.

Carousel

Item Width Mode chooses between fixed widths, set per breakpoint like the grid columns, and widths that follow the content. Sets, Center, Finite, Velocity and Autoplay map onto the UIkit slider options of the same names. Navigation adds a dotnav under the carousel; Slidenav adds previous and next arrows, positioned relative to the carousel or pinned inside it.

Filter

Option	Description
Filter	Turns on the filter navigation, built from the departments entered on the people.
Style	Tabs, or a Subnav in plain, divider or pill form. Pill and divider apply to horizontal navigation only.
All Items	Adds the control that shows everyone again. On by default.
Position	Top, Left or Right. Side positions can use a larger style.
Navigation Order	Alphabetical, or Manual with your own comma-separated list of departments. A reverse switch flips either.

Departments are matched by their text, so spelling has to agree between people. Engineering and engineering are one department; Engineering and Enginering are two.

Panel

Style covers the card and tile variants of the active theme style, or a blank panel, with padding, a maximum width and a single-column content width. Every person can override the style on their own item.

Name, Role and Bio

Each of the three has a text style, a color and margins. Name and Role also choose their HTML element, and their alignment relative to the rest of the card: the Name sits above or to the left of the content, the Role can go above or below the Name, or above or below the Bio. The Bio adds drop cap and column settings.

The Name defaults to h3 and the Role to div. A team section usually sits under a heading of its own, so the default keeps the people one level below it. The Role is not a heading by default because a job title is not a section.

Image

Loading, Border, Box Shadow, Box Decoration, a hover shadow and an optional link work as they do in the native Image element of YOOtheme Pro. Alignment decides where the portrait sits: Top, Bottom, Left, Right, or Between, which places it between the name and the rest of the card. Side alignments get their own grid width, gaps and breakpoint.

Link

Text, ARIA label, target, download and rel options, then a style from the theme buttons and links, a size, a full-width switch and a margin. Text defaults to Read more; a person can set a different one on their own item.

Social Icons

Alignment relative to the name and bio, a link style — icon link, icon button, or muted, text and reset links — a column gap, and shared target and rel options.

Accessibility

Option	Description
ARIA Label	Names the set for assistive technology, for example Our leadership team.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-team-members, .pe-team-members-grid, .pe-team-members-slider, .pe-team-members-filter-nav, .pe-team-members-slider-nav, .pe-team-members-slidenav, .pe-team-members-item, .pe-team-members-name, .pe-team-members-role, .pe-team-members-bio, .pe-team-members-image, .pe-team-members-link, .pe-team-members-social, .pe-team-members-social-item

The element defines no CSS custom properties of its own. Colors, spacing and type come from the active theme style and from the settings above.

Accessibility and keyboard

The filter navigation is a UIkit Nav or Subnav and keeps its keyboard behaviour: the controls take focus in the normal tab order and activate with Enter or Space. In carousel mode the slider navigation and arrows are buttons that do the same.

Social icons carry no visible text, so each one needs its ARIA label; without it a screen reader announces only the link address. Set it on the social item, or on the Social Icons group when one label suits every person.

Name and Role are real headings when you choose a heading element, and appear in the document outline in that order. If the team section is decorative or repeated on many pages, div keeps it out of the outline.

Notes and limits

• The element renders nothing unless at least one person has a visible name, role, bio or image. Links and social icons alone do not keep a card, or the element, on the page — switch off all four content parts and nothing renders, however many people are configured.
• Departments come from free text on each person. There is no shared list to pick from, which keeps the field flexible and makes consistent spelling your job.
• The filter navigation is built from the departments actually present on the people. A department nobody belongs to never appears, including one named in the manual order.
• A social link with an unsupported scheme is skipped, so a typo like htp:// drops the icon instead of rendering a broken one.