Skip to content

Credential Styling Guidance for EAA Providers

This guidance is about the wallet-facing presentation of the credential, particularly how metadata controls attribute order and logo rendering.

Note on Accessibility: When styling credentials, it's important to consider accessibility requirements. For high-level guidance on designing accessible solutions, see the Accessibility Design Guidelines.

1. Attribute order is defined by credential_metadata

Many wallets order credential attributes according to the issuer metadata, not the raw schema order.

  • Use credential_metadata.display in your OpenID4VCI issuer metadata to define the display order of attributes.
  • The wallet will typically render attributes in the order listed in credential_metadata, so make sure the sequence reflects the user experience you want.
  • Place the most important or easy-to-read attributes first, such as name, status, and validity dates.
  • Avoid relying on arbitrary schema ordering; explicit metadata gives you predictable wallet presentation.

2. Supply logo images without padding

Logos should be provided in the exact form the wallet expects.

  • Supply logos with no surrounding padding.
  • Wallet renderers often add their own spacing; pre-padding can make the logo appear too small or misaligned.
  • Use simple, centrally aligned icons or images that scale cleanly on mobile screens.

3. Use clear, human-friendly attribute labels

Wallets can display friendly labels from issuer metadata.

  • Provide explicit display labels for each attribute in your credential metadata.
  • Prefer plain-language labels over internal field names or schema paths.
  • If you support multiple languages, include localized labels in the issuer metadata.
  • Keep labels concise enough to fit on small screens.

4. Test rendering in the target wallet

Verify credential appearance with real wallet behavior.

  • Issue test credentials and inspect them in the EUDI Wallet.
  • Confirm that attribute order matches the credential_metadata sequence.
  • Check that the issuer logo renders correctly without unexpected margins.