Skip to content
FiNAN Logo FiNAN Docs

RegistrationSection

The RegistrationSection component displays a grid of official registration entries for FiNAN organizations in the Nordic region, including the local agency name, registration number, and logo.

Overview

Section titled “Overview”
  • Type: Content Component
  • Category: Trust and compliance
  • Complexity: Moderate
  • File: src/components/RegistrationSection.astro
  • Data config: src/data/registrationSectionConfig.ts

Features

Section titled “Features”
  • Configuration-driven - All content comes from registrationSectionConfig
  • Logo handling - Uses Astro image optimization via Image component
  • Responsive grid - 1 to 4 columns depending on viewport
  • Consistent typography - Local organization names and registration labels are styled uniformly

Props

Section titled “Props”

This component has no props. All content is loaded from registrationSectionConfig.

Usage

Section titled “Usage”

  1. Import the component in a page:

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

  2. Render the section where the registration grid should appear:

    <RegistrationSection />

  3. Update the content by editing src/data/registrationSectionConfig.ts.

Data configuration

Section titled “Data configuration”

Configuration shape

Section titled “Configuration shape”
export interface RegistrationEntity {
  id: string;
  country: string;
  organizationName: string;
  organizationNameLocal: string;
  registrationNumber: string;
  registrationLabel: string;
  image: {
    src: ImageMetadata;
    alt: string;
    width: number;
    loading: 'lazy' | 'eager';
    format: 'webp' | 'png' | 'jpg' | 'jpeg';
  };
}


export interface RegistrationSectionContent {
  title: {
    highlight: string;
    normal: string;
  };
  description: string;
  entities: RegistrationEntity[];
}

Example entity

Section titled “Example entity”
{
  id: 'finland-prh',
  country: 'Finland',
  organizationName: 'Finnish Patent and Registration Office',
  organizationNameLocal: 'Patentti- ja rekisterihallitus',
  registrationNumber: '3084026-2',
  registrationLabel: 'Y-tunnus',
  image: {
    src: finlandPrhImg,
    alt: 'Finnish Patent and Registration Office (PRH)',
    width: 360,
    loading: 'lazy',
    format: 'webp',
  },
}

For editors

Section titled “For editors”

Update or add registration entries

Section titled “Update or add registration entries”
  1. Add the organization logo in src/assets/images/registrations/.
  2. Import the image in src/data/registrationSectionConfig.ts.
  3. Add or edit the entity in the entities array.

Rendering behavior

Section titled “Rendering behavior”
  • The highlighted title text uses title.highlight followed by title.normal.
  • Each card renders a logo, local name, and registration number.
  • A special case reduces the Iceland logo max height.

Styling details

Section titled “Styling details”
  • Section spacing: py-16 with centered max width
  • Grid: grid-cols-1 up to lg:grid-cols-4
  • Card: rounded-lg bg-gray-50 with centered content
  • Logo: object-contain with max height variants

Accessibility

Section titled “Accessibility”
  • Every logo uses descriptive alt text from the config.
  • Registration labels are plain text for screen readers.

Used on

Section titled “Used on”
  • src/pages/index.astro
  • src/pages/about.astro
  • src/pages/contact.astro
  • src/pages/membership.astro
  • Representation pages under src/pages/representation/
Section titled “Related components”

Source code

Section titled “Source code”

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/RegistrationSection.astro
https://github.com/poncardasm/finan-website/blob/main/src/data/registrationSectionConfig.ts