A transaction-detail header with the merchant logo, transaction amount, and date.
Restructure — move out of Header family, rename to Detail Hero
This is not a header. It has no navigation role, no title-only scope, and a card-like structure (avatar + divider + inline label-value). Rename to Detail Hero and rehome with card/hero patterns. Then re-architect: the avatar should be a real Avatar instance, the email row should compose an inline label-value pair, and the description should accept structured content. See Header family restructure.
In Context
Detail Hero appears at the top of transaction detail screens and recipient profile cards — introducing the person or transaction below the app bar.
Live Preview
Add Label Here
Add description here.
Add description here.
Properties
email
DS Health
Reusable
Partial
Reusable as a hero block, but misfiled as a header and tightly coupled to transaction-specific copy ("email:"). Generic card hero should accept any label-value rows.
Self-contained
Warn
Avatar slot is a placeholder circle (not a real Avatar instance). Label-value row is drawn, not composed.
Consistent
Warn
"Header" prefix misleads — this solves a card-hero problem. Pattern should live with card/hero primitives.
Composable
Warn
Single
email boolean can't extend to other metadata rows (phone, MCC, reference number). Needs a flexible rows slot.Behavior
| State | iOS | Android | Figma Property | Notes |
|---|---|---|---|---|
| Default (no email) | Yes | Yes | email=no | Avatar + title + divider + description. |
| With email | Yes | Yes | email=yes | Adds an inline email: value row above the description. |
| Pressed / Disabled | N/A | N/A | — | Static — no interactive states. |
Open Issues
- Misfiled as a header. Anatomy is a card hero (avatar + title + divider + label-value + description). Rename to Detail Hero and move out of the Header family. C1 · Layer Structure & Naming
- Avatar is a placeholder, not an instance. Should accept a real Avatar instance (status ring, initials, image — all of which Avatar already supports). C4 · Native Mappability
- Label-value row is hardcoded to "email:". A detail hero needs flexible metadata rows (phone, reference #, MCC, transaction ID). Replace the boolean with a rows slot or accept a Labeled Field instance. C2 · Variant & Property Naming
- Pressed state on avatar is not defined — if the avatar is tappable (opens profile, edits photo), it needs state coverage. C5 · Interaction State Coverage
- No Code Connect mapping. Blocked on the Detail Hero rehome decision. C7 · Code Connect Linkability
Design Recommendations
- Rename to Detail Hero and move out of the Header family. Rehome next to Visual Popup / card primitives. Rename
- Replace the avatar placeholder with a real Avatar instance. Avatar already supports image, initials, and status ring — no reason to re-draw it here. Composition
- Replace
email=yes|nowith a flexible rows slot.metadata: [LabelValuePair]lets consumers supply any number of rows (email, phone, reference, MCC). Each row could be a small inline-label component or a Labeled Field variant. Property - Expose
surface = brand | default(same pattern as Page Banner). Detail heroes on settings screens may want the default surface. Property - See siblings: Header, Header - Centered, Header - With Logo. Family
Styles
No email
DES DEV
The minimal variant — avatar + title + divider + description. Used when the profile/transaction has no extra metadata to show.
Add Label Here
Add description here.
Add description here.
Properties
email
Properties
email no
Colors
Surface #FFFFFF
Title #0A2757
Description #6780A9
Border #E5EBF4
Layout
Width Fill
Height 220 (hug)
Padding space/space-24
Avatar size 48 × 48
Gap (stacked) space/space-12
Typography
Title Heading/L · Proxima Soft Bold 22/26
Description Body/S · BarkAda Semibold 12/18
No Email — Colors
Transaction-screen header on brand surface, with avatar + title + description split by a divider.
| Role | Token | Default |
|---|---|---|
| Surface bg | main/header-transaction/bg | #1972F9 |
| Title | main/header-transaction/title | #FFFFFF |
| Description | main/header-transaction/description | #FFFFFF @ 80% |
| Divider | main/header-transaction/divider | #FFFFFF @ 24% |
With email row
DES DEV
Adds an inline <code>email: value</code> row between the divider and the description. Used on recipient profile cards.
Add Label Here
Add description here.
Add description here.
Properties
email
Properties
email yes
Colors
Surface bg #0A2757
Title color #FFFFFF
Email color #C2CFE5
Icon color #FFFFFF
Layout
Min height 88
Padding (h) 16
Padding (v) 16
Icon size 24 × 24
Gap 12
Typography
Title style Heading/Small · Bold
Email style Caption/Regular
With Email — Colors
Same brand surface as Card 1 plus a sender-details cluster (name + email) above the description.
| Role | Token | Default |
|---|---|---|
| Surface bg | main/header-transaction/bg | #1972F9 |
| Title | main/header-transaction/title | #FFFFFF |
| Sender label | main/header-transaction/sender | #FFFFFF |
| Sender email | main/header-transaction/email | #FFFFFF @ 80% |
| Description | main/header-transaction/description | #FFFFFF @ 80% |
| Divider | main/header-transaction/divider | #FFFFFF @ 24% |
Property Mapping
| Figma Property | SwiftUI | Compose |
|---|---|---|
| (implicit) | title: String | title: String |
| (placeholder) | avatar: Avatar (instance) | avatar: EBAvatar |
email: boolean | metadata: [LabelValuePair] | metadata: [EBLabelValue] |
| (implicit) | description?: String | description: String? |
| (implicit brand) | surface: brand | default | .ebSurface(.brand) modifier |
Accessibility
| Requirement | iOS | Android |
|---|---|---|
| Heading trait | Apply to the title line. | Modifier.semantics { heading() } on the title. |
| Avatar a11y | If decorative, mark .accessibilityHidden(true). If identifying, label with person's name. | Same — contentDescription empty when decorative, or person's name when identifying. |
| Label-value pairs | Group each pair with .accessibilityElement(children: .combine) so VoiceOver reads "email, juan@gmail.com" as one utterance. | Use Modifier.semantics(mergeDescendants = true) per row. |
| Contrast on brand surface | White text on #005CE5 = 8.5:1 ✓. Muted #C8D8F5 on #005CE5 = 2.1:1 — fails AA body text. Use only for secondary labels ≥14pt bold. | Same ratios — reserve muted color for label text, not body copy. |
Criteria Scorecard
| ID | Criterion | Status | Notes |
|---|---|---|---|
| C1 | Layer Structure & Naming | Requires Rework | "Header - Transaction" misfiled. Rename to Detail Hero. |
| C2 | Variant & Property Naming | Requires Rework | email=yes|no should become metadata: [LabelValuePair]. |
| C3 | Token Coverage | Ready | Surface, title, description tokens bound. |
| C4 | Native Mappability | Requires Rework | Avatar should be a real instance; metadata should be structured, not drawn. |
| C5 | Interaction State Coverage | Needs Refinement | Avatar pressed state not defined — needed if tappable. |
| C6 | Asset & Icon Quality | Needs Refinement | Avatar is a drawn placeholder, not a vector Avatar instance. |
| C7 | Code Connect Linkability | Not Mapped | Blocked on rehome + avatar-instance decisions. |
Variants Inventory (2 total)
| # | Node | Dimensions | |
|---|---|---|---|
| 1 | 18430:2906 | no | 360 × 220 |
| 2 | 18430:2898 | yes | 360 × 191 |
1.0.0 — April 2026Major
Initial Assessment · node 18430:2897
Verdict: Restructure — Not a header. Rename to Detail Hero and move out of the Header family. Open
ArchitectureC2 — metadata rows — Replace
C2email=yes|no with a flexible metadata: [LabelValuePair] slot. OpenC4 — Avatar instance — Replace drawn placeholder with a real Avatar instance. Open
C4C5 — Avatar state — Define pressed/disabled for tappable avatar. Open
C5C7 — Code Connect — Blocked. Open
C7