Team Spans Page - Specification

Overview

Create a responsive grid layout that displays team members grouped by their roles in contiguous spans. Each span consists of a role header followed by associated team member cards, with multiple spans potentially appearing on the same row if space allows.

Components

Span Components

Create the following Astro components in /src/components/team/:

1. ManagingPartnersSpan.astro
2. VerticalPartnersSpan.astro
3. TrusteesSpan.astro
4. AdvisoryBoardSpan.astro
5. FoundingTeamSpan.astro
6. ActiveFellowsSpan.astro
7. PhilanthropiesSpan.astro

Page Layout

• Single responsive grid container
• Grid items flow from left to right
• No forced line breaks between spans
• Responsive column count based on viewport width

Requirements

Grid Behavior

• Contiguous Spans: Each role group must maintain its cards together in a single span
• Horizontal Flow: Spans should flow left-to-right, top-to-bottom
• Responsive: Adjust number of columns based on viewport width
• No Gaps: Continuous flow without unnecessary white space between spans

Span Structure

Each span component should:

1. Display a role title as a header
2. Show all team members for that role as cards
3. Maintain consistent styling across all spans
4. Be self-contained and independent of other spans

Visual Design

• Role Header: Prominently displayed above the first card of each span
• Cards: Uniform styling with consistent spacing
• Responsive: Cards should resize appropriately for different screen sizes
• Accessibility: Proper heading hierarchy and ARIA attributes

Implementation Notes

1. Use CSS Grid for the main layout
2. Each span should be a self-contained component
3. Maintain consistent spacing and alignment
4. Ensure proper responsive behavior
5. Optimize for performance with lazy loading where appropriate

Example Structure

<main class="team-grid">
  <!-- Managing Partners -->
  <div class="team-span">
    <h2 class="role-header">Managing Partners</h2>
    <div class="person-cards">
      <!-- Person cards go here -->
    </div>
  </div>
  
  <!-- Next span continues in the same row if space allows -->
  <div class="team-span">
    <h2 class="role-header">Advisory Board</h2>
    <div class="person-cards">
      <!-- Person cards go here -->
    </div>
  </div>
</main>

Acceptance Criteria

• All team members are displayed in their respective role groups
• Grid flows continuously without unnecessary breaks
• Layout is fully responsive
• No PersonCard is unreasonably large.
• All spans maintain consistent styling
• Performance is optimized for all device sizes