Partners

The Partners component displays a responsive grid of partner organization logos with a simple heading. Logos are imported through Astro’s asset pipeline and rendered with consistent sizing.

Overview

File: src/components/Partners.astro Data Config: Hardcoded in component (imports from src/assets/images/partners/) Used On: Homepage (active)

This component is ideal for:

• Showcasing institutional and research partners
• Reinforcing credibility with recognizable logos
• Providing visual variety between content sections

Props

This component has no props. All logos and alt text are defined in src/components/Partners.astro.

Component Structure

The component imports logos using astro:assets and renders them in a flexible row layout.

---
import { Image } from 'astro:assets';
import arcadaLogo from '../assets/images/partners/arcada-logo.png';
---

<section class="bg-white py-16 md:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mb-16 text-center">
      <h2 class="mb-4 text-3xl font-bold text-gray-900 md:text-4xl">
        Our Partners in Healthcare, Education & Policy
      </h2>
    </div>

    <div class="flex flex-wrap items-center justify-center gap-8 md:gap-12">
      <Image src={arcadaLogo} alt="Arcada University of Applied Sciences" />
      <!-- More logos -->
    </div>
  </div>
</section>

Usage

1. Import the component in your Astro page:

   ---
   import Partners from '../components/Partners.astro';
   ---

2. Render the component with no props:

   <Partners />

3. Update logos directly in the component file:

   • Add new imports from src/assets/images/partners/
   • Insert additional <Image /> blocks in the grid

Logo Assets

Current logo files imported in the component:

• src/assets/images/partners/arcada-logo.png
• src/assets/images/partners/eu-research-innovation.png
• src/assets/images/partners/filipino-nursing-diaspora-network.png
• src/assets/images/partners/finnish_government_emblem.svg
• src/assets/images/partners/ianpc.png
• src/assets/images/partners/moniheli-logo.png
• src/assets/images/partners/oamk-logo.png
• src/assets/images/partners/sienna-logo.png
• src/assets/images/partners/wsdn-logo.jpg

Styling Details

• Background: White (bg-white)
• Padding: py-16 on mobile, py-24 on md+ screens
• Layout: Flex wrap with centered alignment
• Spacing: gap-8 on mobile, gap-12 on md+ screens
• Logo sizing: Varies by logo using max-h-* utility classes

For Content Editors

Adding a New Partner Logo

1. Add the logo file to src/assets/images/partners/ in the main website repo.
2. Import the logo at the top of src/components/Partners.astro:

   import newPartnerLogo from '../assets/images/partners/new-partner.png';

3. Add an <Image /> block in the grid with alt text:

   <Image
     src={newPartnerLogo}
     alt="New Partner Name"
     class="max-h-16 w-auto object-contain md:max-h-20"
     width={160}
     quality={80}
   />

4. Preview changes using pnpm dev.

Notes

• Keep logo dimensions consistent where possible.
• Use descriptive alt text for accessibility.

Component Location

Referenced From:

• src/pages/index.astro (homepage)

Related Components

• Partnership - Partner detail section with text blocks
• Pillars - Similar grid layout with card content
• Statistics - Another section with grid layout