Team Member List

Ready

HTML
View
Context
Info
Notes


        
        <section class="teaser team-list">
    <h2 class="teaser-heading">Meet the team</h2>

    <ul class="teaser-list">

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Miss Norma McClure, Senior Branding Administrator">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Miss Norma McClure</h3>
                <p>Senior Branding Administrator</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Melyssa Padberg, Senior Paradigm Facilitator">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Melyssa Padberg</h3>
                <p>Senior Paradigm Facilitator</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Carolyn Hand, Future Program Developer">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Carolyn Hand</h3>
                <p>Future Program Developer</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Nicole Gaylord, Human Operations Manager">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Nicole Gaylord</h3>
                <p>Human Operations Manager</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Adah Feeney, Forward Mobility Facilitator">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Adah Feeney</h3>
                <p>Forward Mobility Facilitator</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Athena Durgan, Customer Marketing Specialist">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Athena Durgan</h3>
                <p>Customer Marketing Specialist</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Seamus Oberbrunner, Product Paradigm Assistant">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Seamus Oberbrunner</h3>
                <p>Product Paradigm Assistant</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Daphney Mertz, Central Branding Planner">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Daphney Mertz</h3>
                <p>Central Branding Planner</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Orpha Ward Jr., Corporate Markets Supervisor">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Orpha Ward Jr.</h3>
                <p>Corporate Markets Supervisor</p>
            </div>
        </li>

        <li class="teaser-group">

            <img srcset="https://picsum.photos/400/400?image&#x3D;1027 400w,
                https://picsum.photos/400/400?image&#x3D;1027 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="https://picsum.photos/400/400?image&#x3D;1027" alt="A photo of Hans Bechtelar, Principal Web Orchestrator">

            <div class="teaser-text">
                <h3 class="teaser-item-heading">Hans Bechtelar</h3>
                <p>Principal Web Orchestrator</p>
            </div>
        </li>

    </ul>

</section>


        <section class="teaser team-list">
    <h2 class="teaser-heading">{{ heading }}</h2>
    
<ul class="teaser-list">

{{#each members}}
<li class="teaser-group">
    
    <img srcset="{{ image400URL }} 400w,
                {{ image800URL }} 800w" sizes="(max-width: 59.99em) 90vw, 
                (max-width: 105em) 17.5em,
                960px" src="{{ image400URL }}" alt="A photo of {{ name }}, {{ jobTitle }}">
  
    <div class="teaser-text">
      <h3 class="teaser-item-heading">{{ name }}</h3>
      <p>{{ jobTitle }}</p>
    </div>
</li>

{{/each}}

</ul>

</section>


        
            
            {
  "heading": "Meet the team",
  "members": [
    {
      "name": "Miss Norma McClure",
      "jobTitle": "Senior Branding Administrator",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Melyssa Padberg",
      "jobTitle": "Senior Paradigm Facilitator",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Carolyn Hand",
      "jobTitle": "Future Program Developer",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Nicole Gaylord",
      "jobTitle": "Human Operations Manager",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Adah Feeney",
      "jobTitle": "Forward Mobility Facilitator",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Athena Durgan",
      "jobTitle": "Customer Marketing Specialist",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Seamus Oberbrunner",
      "jobTitle": "Product Paradigm Assistant",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Daphney Mertz",
      "jobTitle": "Central Branding Planner",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Orpha Ward Jr.",
      "jobTitle": "Corporate Markets Supervisor",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    },
    {
      "name": "Hans Bechtelar",
      "jobTitle": "Principal Web Orchestrator",
      "image400URL": "https://picsum.photos/400/400?image=1027",
      "image800URL": "https://picsum.photos/400/400?image=1027"
    }
  ]
}

Handle: @team-member-list
Preview:
- With layout
- Component only
Filesystem Path: src/fractal/components/team-member-list/team-member-list.hbs

For team members, images are square (unlike standard teaser list images which are 4:3)