Partner block

Overview

The partner block names the legal entity that’s actually on the hook for a product — Flatpay Financial Services for Capital, the processor for card payments, the bank holding settlement accounts. Customers signing up to a financial service have a right to know the difference between the brand they see and the entity that’s lending or processing their money.

In context

The most common placement is a column aside next to a primary form — Capital application, lending agreement, KYC submit. The block is fixed at a comfortable column width and reads as secondary to the form’s primary content.

Variants

Two alignments and a customisable eyebrow. Default eyebrow is “Presented by” — change it when the relationship is better described differently (“In partnership with”, “Card processing by”, “Settlement banking by”).

Multiple partners

When a single product depends on more than one partner, stack the blocks vertically. Keep the eyebrows specific so the user knows what each entity is responsible for — a generic “Presented by” on three blocks is worse than three named relationships.

Anatomy

Three named parts on a soft surface. The eyebrow names the relationship; the logo carries the entity; the body explains the mechanics in one paragraph.

• 01Container. 8 px radius, 28 px padding on all sides, surface-secondary background (#F7F7F7) — the same colour the rest of the system uses for “quiet card” surfaces. Renders as <aside> by default.
• 02Eyebrow. Inter Tight SemiBold 14 / 20, tertiary text (#595959). Names the relationship in two or three words.
• 03Logo block. Pass whatever the partner has — a wordmark SVG, a lockup, an <img>. The block treats it as a slot, sits it on 11 px of vertical padding, and exposes a role="img" with the supplied logoLabel.
• 04Body copy. Inter Tight Regular 14 / 20, secondary text (#404040). One paragraph; tabular-nums and lining-figures are on so any numerals (registration numbers, percentages) line up.

Accessibility

• Logo gets a real label. Pass logoLabelwith the entity’s registered name (“Flatpay Financial Services A/S logo”). The block wires this to role="img" and aria-labelso screen readers announce the entity, not just “graphic”.
• Aside semantics by default. The block renders as <aside> — secondary content, related to but separate from the main flow. Use as="section" when the block is the page’s primary content (a standalone Disclosures page) and as="div" when it sits inside another aside (a footer disclosures group).
• Body copy is readable, not decorative.14 / 20 is the minimum for regulatory copy. Don’t shrink it further to fit a tighter column — let the column resize, or move the block to a wider slot.

Code

import { FlatpayLogo, PartnerBlock } from "@flatpay-dk/ui";

// Capital landing aside
<PartnerBlock
  logo={<FlatpayFinancialServicesLockup />}
  logoLabel="Flatpay Financial Services A/S"
>
  Flatpay Financial Services A/S is a fully-owned subsidiary of
  Flatpay ApS, which expands on the Flatpay mission to deliver
  transparent, reliable, and personal solutions for all your
  financial needs.
</PartnerBlock>

// Custom eyebrow + centered alignment
<PartnerBlock
  eyebrow="In partnership with"
  align="center"
  logo={<PartnerLogo />}
  logoLabel="Adyen N.V."
>
  Card payments are processed by Adyen N.V. under their Master
  Services Agreement.
</PartnerBlock>

Best practices

• Name the relationship in the eyebrow. “Presented by” is the default; reach for “Card processing by”, “In partnership with”, “Banking by” when the role is more specific. The user shouldn’t have to read the body copy to know what the partner does.
• Keep the body to one paragraph.The block is a disclosure, not a description. If there’s more to say (full T&Cs, regulatory addresses), link out from inside the body — don’t paste it all here.
• Use the partner’s real wordmark. Don’t set the partner name in our display face — use their actual logo asset. This is the one place the system hands typography off to someone else.
• Don’t use it as a generic card.If the content is just “here are some testimonials” or “here’s a feature highlight”, that’s not a partner block — that’s a regular card or a section.

Props

Related