Component API Reference

This is the complete API reference for all 26 components in the FiNAN website. Each component is documented with its props, usage examples, and implementation details.

Tip

Components are organized by category for easy navigation. Click on any component to view its detailed documentation.

Component Categories

Layout Components

Components that provide structural wrappers and consistent page layouts.

Navbar

Primary navigation bar with responsive menu and branding.

Key Props: currentPath

Used on: All pages

Footer

Site footer with links, contact information, and social media.

Key Props: None (uses siteConfig)

Used on: All pages

TopBanner

Announcement banner displayed at the top of pages.

Key Props: message, link, linkText

Used on: Selected pages

PageHeader

Standard page header with title and optional description.

Key Props: title, description, backgroundImage

Used on: Most content pages

HeroHeader

Large hero section with image, title, and call-to-action.

Key Props: None (uses heroConfig)

Used on: Homepage

Content Display Components

Components that display dynamic data from configuration files.

Committee

Displays committee member profiles with photos and roles.

Key Props: None (uses committee data files)

Used on: All representation pages

Partners

Grid display of partner organizations with logos.

Key Props: None (uses partners config)

Used on: Homepage, Partners page

Statistics

Displays key statistics with icons and numbers.

Key Props: None (uses stats config)

Used on: Homepage, About page

Pillars

Showcases organizational pillars or core values.

Key Props: None (uses pillars config)

Used on: Homepage

OurAdvocacy

Displays advocacy focus areas with descriptions.

Key Props: None (uses advocacy config)

Used on: Advocacy page

HowWeHelp

Shows services or help offerings with icons.

Key Props: None (uses services config)

Used on: Homepage, Services page

PublicationCard

Card layout for publications and resources.

Key Props: None (data-driven in page)

Used on: Publications page

FAQAccordion

Collapsible accordion for frequently asked questions.

Key Props: None (uses FAQ config)

Used on: FAQ page

Event Components

Components specific to event pages and registration.

EventHeaderSection

Hero header designed for event pages with date and location.

Key Props: secondaryButtonText, secondaryButtonLink

Used on: Event pages

EventSched

Displays event schedule with timeline and sessions.

Key Props: schedule

Used on: Event pages

RegistrationSection

Organization registration grid with regional registration details.

Key Props: None (uses registrationSectionConfig)

Used on: Homepage, membership, representation pages

BannerTriennialGathering

Special banner for the triennial gathering event.

Key Props: None (uses banner config)

Used on: Homepage (when active)

Blog & Content Components

Components for blog posts and dynamic content.

Blog

Displays recent Ghost CMS posts in a shared news grid.

Key Props: None (fetches latest posts)

Used on: Homepage, about, contact, membership

BlogRepresentation

Country-specific Ghost CMS feed for representation pages.

Key Props: country

Used on: Representation pages

Representation Components

Components specific to country representation pages.

NordicRepresentation

Overview of all Nordic countries with navigation.

Key Props: None (uses representation config)

Used on: Representation landing page

RepresentationContactSection

Contact information for country representatives.

Key Props: None (uses representation contact config)

Used on: Representation pages

Call-to-Action Components

Components designed to encourage user engagement.

CTABanner

Call-to-action banner with button and message.

Key Props: None (uses ctaBannerConfig)

Used on: Multiple pages

Partnership

Partnership call-to-action with benefits and contact.

Key Props: None (uses partnership config)

Used on: Partnership page

Utility & Interactive Components

Components providing functionality without primary visual content.

StructuredData

Injects JSON-LD structured data for SEO.

Key Props: schemas

Used on: All pages (SEO)

Modal

Reusable modal dialog component.

Key Props: id, title, maxWidth

Used on: Event registration

RegistrationModal

Specialized modal for event registration.

Key Props: None (static links)

Used on: Event pages

Component Usage Summary

Most Commonly Used Components

1. Navbar & Footer - Used on every page
2. Committee - Used on all 8 representation pages
3. PageHeader - Used on most content pages
4. Blog / BlogRepresentation - Used for dynamic content display

Components by Complexity

Simple (Easy to modify)

• TopBanner
• PageHeader
• Statistics
• Partners

Moderate (Requires understanding of data structures)

• Committee
• FAQAccordion
• EventSched
• Blog

Complex (Requires technical knowledge)

• Navbar (responsive logic)
• BlogRepresentation (Ghost CMS integration)
• StructuredData (JSON-LD schema)
• Modal (client-side state management)

Common Props Patterns

Image Props

Components that accept images use Astro’s ImageMetadata type:

import type { ImageMetadata } from 'astro';

interface Props {
  image: ImageMetadata;
  alt: string;
}

Data Array Props

Components that display lists use typed arrays:

import type { CommitteeMember } from '@/data/representation/committee/types';

interface Props {
  members: CommitteeMember[];
}

Optional Configuration Props

Many components accept optional customization:

interface Props {
  title: string;
  variant?: 'primary' | 'secondary';
  showDescription?: boolean;
}

Component File Locations

All components are located in the main FiNAN website repository:

https://github.com/poncardasm/finan-website/tree/main/src/components

Browse the source code to see complete implementations and usage examples.

Next Steps

• Component Architecture - Understand component types and patterns
• Creating Components - Learn how to build new components
• Data Configuration - Configure data for components

Individual Component Documentation

Detailed documentation for each individual component (props, usage examples, implementation notes) will be added in future updates to this API reference.

Quick Reference Table

Component	Category	Complexity	Props Count	Used On
Navbar	Layout	Complex	1	All pages
Footer	Layout	Simple	0	All pages
TopBanner	Layout	Simple	3	Selected pages
PageHeader	Layout	Simple	3	Most pages
HeroHeader	Layout	Moderate	0	Homepage
Committee	Content	Moderate	0	8 pages
Partners	Content	Simple	0	2 pages
Statistics	Content	Simple	0	2 pages
Pillars	Content	Simple	0	Homepage
OurAdvocacy	Content	Simple	0	Advocacy
HowWeHelp	Content	Simple	0	Homepage
PublicationCard	Content	Simple	0	Publications
FAQAccordion	Content	Moderate	0	FAQ page
EventHeaderSection	Event	Moderate	2	Event pages
EventSched	Event	Moderate	1	Event pages
RegistrationSection	Event	Moderate	0	Event pages
BannerTriennialGathering	Event	Simple	0	Homepage
Blog	Blog	Moderate	0	4 pages
BlogRepresentation	Blog	Complex	1	8 pages
NordicRepresentation	Representation	Moderate	0	1 page
RepresentationContactSection	Representation	Simple	0	8 pages
CTABanner	CTA	Simple	0	Multiple
Partnership	CTA	Simple	0	1 page
StructuredData	Utility	Complex	1	All pages
Modal	Utility	Complex	3	Event pages
RegistrationModal	Utility	Complex	0	Event pages

---

Total Components: 26 Component Types: Layout (5), Content (8), Event (4), Blog (2), Representation (2), CTA (2), Utility (3)