---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
title: 'Build a team directory | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Member grid with photos and bios'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Build a team directory'
      description: 'Member grid with photos and bios'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/team-directory'
      description: 'Member grid with photos and bios'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build a team directory.

Member grid with photos and bios

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Card](/hc/documentation/learn-dxpr-builder/elements/card)
- [Social Links](/hc/documentation/learn-dxpr-builder/elements/social-links)
- [About page](/hc/documentation/learn-dxpr-builder/tutorials/about-page)

Here you build a team page: a centred header, three leadership cards with a LinkedIn link under the third, and a grid of four team cards. Use it when every colleague should be easy to find. For a short team section on your company page, follow [Create an About Us page](/hc/documentation/learn-dxpr-builder/tutorials/about-page) instead.

The video builds the team page of a logistics company.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.
- New elements land at the top of their section or column. That is why the social links go in before the card above them.

## Step 1: add the header

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Hover the section and open **More** > **Settings**. Under **HTML classes** pick **Align text center**, then click **Save**.
3. Click **+** on the section and pick **Text** from the **Content** tab.
4. Type "Our team" as **Heading 2**, add one line of introduction and click **Save**. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see [Build SEO-friendly pages](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Step 2: add the leadership cards

1. Hover the section and click **Add Section Below**. Open the new section's **More** > **Settings**, pick a light grey **Background** in the **Style** panel and click **Save**.
2. Click **+** on the section and pick **Row**. Click its grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. Click **+** in the first column and pick **Card**. Open its **More** > **Settings**, set the **Header** to the role and the **Title** to the name, then click **Save**.
4. Add a **Card** to the second column the same way.
5. Click **+** in the third column and pick **Social links**. It arrives with two example rows. Type `linkedin` over "Facebook" in the first row and type the profile URL beside it. Remove the second row with its **×**, set **Style** to **Circle** and **Size** to **2x**, then click **Save**.
6. Click **+** in the same column and pick **Card**; it lands above the links. Set its **Header** and **Title** the same way and click **Save**.
7. Click **+** on the section and pick **Text**; it lands above the row. Type "Leadership" as **Heading 2** and click **Save**.

## Step 3: add the team grid

1. Add a third section with **Add Section Below**, then a **Row**. Click its grid icon (**Column layout**), pick the **1/4 + 1/4 + 1/4 + 1/4** preset and click **Save**.
2. Add a **Card** to each column. Open its **More** > **Settings**, set the role as **Header** and the name as **Title**, and click **Save**.
3. Click **+** on the section and pick **Text**; it lands above the row. Type "The team" as **Heading 2** and click **Save**.

## Step 4: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## Go further

Not shown in the video:

- **Photos and biographies**: click **+** on a card and add a **Text** biography. Then click **+** on the card again and add an **Image**; it lands above the text. Fill in the **Alt attribute** with the person's name.
- **Rounded photos**: on each image, set **Border radius** in the **Style** panel. The value is in pixels, up to 100.
- **Lift on hover**: in the card's **Hover style** panel set **Drop shadow** to 2.
- **Team that updates itself**: create a "Team member" content type and a **Grid** view with a block display. Insert the view from the **Drupal Views** tab, and editors add people without touching the page.

## What you see

"Our team" sits centred at the top. On the grey band, three leadership cards show each role in the header and the name below, with a round LinkedIn icon under the third. "The team" follows with four cards side by side.

## If you don't see the page as shown

- **A card shows no settings dialog after you add it.** Cards open empty, without a dialog. Hover the card and open **More** > **Settings** to fill in **Header** and **Title**.
- **A social link shows "No matching brand icon found".** The brand is not a known icon name. Type it in lower case, such as `linkedin`.
- **The LinkedIn icon sits above the card.** The card went in before the links, and new elements land at the top of their column. Drag the card above the links by the drag handle on its control bar.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Card element](/hc/documentation/learn-dxpr-builder/elements/card) for card types and child elements
- [Social links element](/hc/documentation/learn-dxpr-builder/elements/social-links) for icon styles and colours
- [About page](/hc/documentation/learn-dxpr-builder/tutorials/about-page) to place a shorter team section on your company page