Skip to content
FiNAN Logo FiNAN Docs

Partnership

The Partnership component renders detailed partner spotlights with a logo and multiple paragraphs of rich text. Content is provided through a partners prop, typically from src/data/representation/partnership/ files.

Overview

Section titled “Overview”

File: src/components/Partnership.astro Data Config: src/data/representation/partnership/*.ts Used On: Representation pages (e.g., Finland)

This component is ideal for:

  • Highlighting formal partnerships and collaborations
  • Showing detailed descriptions alongside a partner logo
  • Using rich text with links and emphasis

Props

Section titled “Props”
import type { ImageMetadata } from 'astro';


export interface Partner {
  logo: ImageMetadata;
  alt: string;
  content: string[]; // Paragraphs, supports HTML
}


interface Props {
  partners: Partner[];
}

Prop Details

Section titled “Prop Details”
  • partners: Array of partner definitions rendered in order
  • logo: Imported image using Astro assets
  • alt: Logo alt text for accessibility
  • content: Array of paragraph strings. HTML is supported via set:html

Usage

Section titled “Usage”

  1. Import the component and partner data:

    ---
    import Partnership from '../../components/Partnership.astro';
    import { finlandPartners } from '../../data/representation/partnership/finlandPartnership';
    ---

  2. Render the component and pass the data:

    <Partnership partners={finlandPartners} />

  3. Update partner content in the data file:

    • Path: src/data/representation/partnership/finlandPartnership.ts
    • Add or edit items in the Partner[] array

Data Configuration

Section titled “Data Configuration”

Example Data File

Section titled “Example Data File”
import type { Partner } from './types';
import oamkLogo from '../../../assets/images/partners/oamk-logo.png';


export const finlandPartners: Partner[] = [
  {
    logo: oamkLogo,
    alt: 'Oulu University of Applied Sciences',
    content: [
      'Study Nursing in Northern Finland at <strong>Oulu University of Applied Sciences</strong>!',
      '<a href="https://example.com" class="text-blue-800 underline hover:text-blue-900">Learn more</a>.',
    ],
  },
];

Styling Details

Section titled “Styling Details”
  • Background: White (bg-white)
  • Padding: pb-16 (bottom spacing only)
  • Layout: Column on mobile, row on md+ screens
  • Logo width: w-60 with auto height
  • Paragraph spacing: pb-4 on all but last paragraph

For Content Editors

Section titled “For Content Editors”

Updating Partner Content

Section titled “Updating Partner Content”

  1. Open the partner data file:

    • Repository: finan-website
    • Path: src/data/representation/partnership/finlandPartnership.ts

  2. Edit or add paragraphs in the content array:

    content: [
      'Updated paragraph text here.',
      '<a href="https://example.com" class="text-blue-800 underline hover:text-blue-900">New link</a>.',
    ],

  3. Add new partners by inserting another object in the array.

Notes

Section titled “Notes”
  • HTML is allowed in content strings, so be careful with tags.
  • Use strong for emphasis and a tags for links.

Component Location

Section titled “Component Location”

Referenced From:

  • src/pages/representation/finland.astro
Section titled “Related Components”