Skip to content

Build a team directory

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 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.

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.

What's next?

Something wrong or missing on this page? Report it or edit the page.