DBindly Docs
Examples

Team Directory

Overview

This example shows how to build a team directory with:

  • Team member cards
  • Role-based filtering
  • Search by name
  • Department badges
  • Social links

Collection Structure

Create a collection called team with these fields:

FieldTypeDescription
namestringFull name
titlestringJob title
departmentstringDepartment name
biostringShort biography
photostringProfile photo URL
emailstringEmail address
linkedinstringLinkedIn profile URL
twitterstringTwitter profile URL
isLeadershipbooleanIs leadership team

Complete Example

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Our Team</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://dbindly.com/dbindly.min.js"></script>
</head>
<body>
  <div class="team-page">
    <!-- Header -->
    <header class="team-header">
      <h1>Meet Our Team</h1>
      <p>The people behind our success</p>
    </header>

    <!-- Search & Filters -->
    <div class="controls">
      <input
        type="text"
        dbind_search="team"
        placeholder="Search by name..."
        class="search-input"
      >

      <div class="filters">
        <button class="filter-btn active" onclick="filterDept('all')">All</button>
        <button class="filter-btn" onclick="filterDept('engineering')">Engineering</button>
        <button class="filter-btn" onclick="filterDept('design')">Design</button>
        <button class="filter-btn" onclick="filterDept('marketing')">Marketing</button>
      </div>
    </div>

    <!-- Leadership Section -->
    <section class="section">
      <h2>Leadership</h2>
      <div
        class="team-grid"
        dbind_repeat="team"
        dbind_filter="isLeadership:true"
        dbind_sort="name:asc"
      >
        <div class="team-card leadership">
          <div class="member-photo">
            <img dbind_src="photo" dbind_alt="name">
          </div>

          <div class="member-info">
            <h3 dbind_data="name"></h3>
            <span dbind_data="title" class="title"></span>
            <span dbind_data="department" class="department"></span>
            <p dbind_data="bio"></p>
          </div>

          <div class="member-links">
            <a dbind_href="email" class="link-email">Email</a>
            <a dbind_href="linkedin" dbind_show="linkedin" class="link-linkedin">LinkedIn</a>
            <a dbind_href="twitter" dbind_show="twitter" class="link-twitter">Twitter</a>
          </div>
        </div>
      </div>
    </section>

    <!-- All Team Members -->
    <section class="section">
      <h2>Team Members</h2>
      <div
        class="team-grid"
        id="team-grid"
        dbind_repeat="team"
        dbind_filter="isLeadership:false"
        dbind_sort="name:asc"
        dbind_paginate="12"
      >
        <div class="team-card">
          <div class="member-photo">
            <img dbind_src="photo" dbind_alt="name">
          </div>

          <div class="member-info">
            <h3 dbind_data="name"></h3>
            <span dbind_data="title" class="title"></span>
            <span dbind_data="department" class="department"></span>
          </div>

          <div class="member-links">
            <a dbind_href="email" class="link-email">Email</a>
            <a dbind_href="linkedin" dbind_show="linkedin" class="link-linkedin">LinkedIn</a>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script>
    DBindly.init({
      apiUrl: 'https://dbindly.com/api',
      apiKey: 'pk_live_your_key',
      cache: true
    });

    function filterDept(dept) {
      const grid = document.getElementById('team-grid');
      document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      event.target.classList.add('active');

      if (dept === 'all') {
        grid.setAttribute('dbind_filter', 'isLeadership:false');
      } else {
        grid.setAttribute('dbind_filter', `department:${dept}`);
      }
      DBindly.render();
    }
  </script>
</body>
</html>

CSS

.team-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.team-header {
  text-align: center;
  margin-bottom: 40px;
}

.team-header h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

.team-header p {
  color: #666;
  font-size: 18px;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.search-input {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 100%;
  max-width: 300px;
  font-size: 14px;
}

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: #007bff;
  color: #007bff;
}

.filter-btn.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.section {
  margin-bottom: 60px;
}

.section h2 {
  font-size: 24px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #eee;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.team-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.team-card:hover {
  transform: translateY(-4px);
}

.team-card.leadership {
  border: 2px solid #007bff;
}

.member-photo {
  padding-top: 100%;
  position: relative;
  background: #f5f5f5;
}

.member-photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-info {
  padding: 20px;
  text-align: center;
}

.member-info h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.title {
  display: block;
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.department {
  display: inline-block;
  background: #e8f4fd;
  color: #007bff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.member-info p {
  margin-top: 12px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.member-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #eee;
}

.member-links a {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
  transition: background 0.2s;
}

.link-email {
  background: #f0f0f0;
  color: #333;
}

.link-linkedin {
  background: #0077b5;
  color: white;
}

.link-twitter {
  background: #1da1f2;
  color: white;
}

/* Pagination */
.dbindly-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.dbindly-pagination button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.dbindly-pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

Sample Data

[
  {
    "name": "Sarah Johnson",
    "title": "CEO & Founder",
    "department": "Leadership",
    "bio": "Sarah founded the company in 2018 with a vision to transform how teams collaborate.",
    "photo": "https://example.com/sarah.jpg",
    "email": "mailto:sarah@example.com",
    "linkedin": "https://linkedin.com/in/sarah",
    "twitter": "https://twitter.com/sarah",
    "isLeadership": true
  },
  {
    "name": "Alex Chen",
    "title": "Senior Developer",
    "department": "Engineering",
    "bio": "",
    "photo": "https://example.com/alex.jpg",
    "email": "mailto:alex@example.com",
    "linkedin": "https://linkedin.com/in/alex",
    "twitter": "",
    "isLeadership": false
  }
]

Variations

With Modal Details

Add a modal to show full member details:

<div class="team-card" onclick="showMember(this)">
  <!-- card content -->
</div>

<div id="member-modal" class="modal">
  <div class="modal-content">
    <img id="modal-photo" src="">
    <h2 id="modal-name"></h2>
    <p id="modal-bio"></p>
  </div>
</div>

Compact List View

Switch to a compact list view:

<div class="team-list" dbind_repeat="team" dbind_sort="department:asc">
  <div class="team-row">
    <img dbind_src="photo" class="small-photo">
    <span dbind_data="name"></span>
    <span dbind_data="title"></span>
    <span dbind_data="department"></span>
    <a dbind_href="email">Contact</a>
  </div>
</div>

Next Steps

E-commerce Catalog

Previous Page

On this page

OverviewCollection StructureComplete ExampleHTMLCSSSample DataVariationsWith Modal DetailsCompact List ViewNext Steps