PageTitle
Concludes an activity — a status icon, a bold two-line title and an optional description.
page-titleOpen in Figma ↗A centred or left-aligned status message block that communicates the outcome of an activity with a status icon, a primary heading, and an optional secondary description. Acts as a generic informative message or a specific scenario outcome — it delivers a conclusion, not an introduction.
Use for: Confirmation, success, warning, alert, or neutral outcome screens — inside bottom-sheets, within sections, outside sections, or as a standalone page message. Use it anywhere you need a concise conclusion or result statement after a user action, or a generic informative message block.
Not for: General thematic page introductions — use page-header instead. Not for inline form validation or toast notifications.
Choosing: Use alignment=center for general, standalone outcome messages (e.g. a full-page success confirmation). Use alignment=left when the message is contextual — embedded within a content flow, a section, or alongside left-aligned siblings. Use type=lg for the most prominent, top-level outcomes (e.g. payment success). Step down through md, sm as the context gets tighter or the message sits lower in the visual hierarchy. Use type=xs for the smallest footprint — works as a generic text placeholder or a compact inline message within a bottom-sheet or card. Pair the status-icon slot with the appropriate icon type — positive, alert, warning, or neutral — to reflect the nature of the outcome. Toggle text-secondary off when a description is unnecessary and the heading alone is sufficient.
Rules: Always match the status-icon type to the actual outcome (positive for success, alert for errors, warning for caution, neutral for informational). Keep the primary heading to two lines maximum. The secondary description is optional — hide it via text-secondary when the heading is self-explanatory. Do not resize the status-icon slot.
page-title vs page-header: page-title concludes — it is a generic informative message or a specific scenario outcome (success, error, warning). page-header introduces — it is a general thematic header that opens a page and sets context. If the block communicates the result of an activity or delivers informational content, use page-title. If the block orients the user at the start of a page, use page-header.
Your new plan is active
Freedom Live Plan 200 starts today. We have sent the details to your email.
import SwiftUI import EandTokens // page-title lg: 56pt status-icon tile (r20), then a 24pt / 110% title (heading/lg style, // 2 lines max) and an optional body/md description, centred, 20pt below. struct PageTitle: View { let title: String let description: String? var body: some View { VStack(spacing: EandSpacing.md) { Image(systemName: "checkmark.circle.fill") .font(.system(size: EandIcon.icon2xl)) .foregroundColor(EandColor.statusIconIconPositive) .frame(width: EandScale.scale56, height: EandScale.scale56) .background(EandColor.statusIconSurfacePositive) .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius7)) VStack(spacing: EandSpacing.xs) { Text(title) .font(.system(size: EandTypography.headingLg.size, weight: EandTypography.headingLg.weight)) .lineLimit(2) if let description { Text(description).font(.system(size: EandTypography.bodyMd.size)) } } .foregroundColor(EandColor.textDefaultDefault) .multilineTextAlignment(.center) } .padding(.bottom, EandSpacing.xl) } }
When to use
- Use for the outcome of an action — payment success, a failed top-up, a plan change that
needs attention — on a full page, inside a
Section, or inside aBottomSheet. - Don't use to introduce a page; that is PageHeader. Not for inline form
validation or toasts (use
Inputerrors andSnackbar).
Choosing a size
| Type | Title | Icon | Use for |
|---|---|---|---|
lg | 24px bold | yes | Top-level outcomes such as a payment confirmation |
md | 20px bold | yes | Outcomes inside a section or a tall sheet |
sm | 18px bold | no | Messages lower in the hierarchy |
xs | 16px bold | no | Compact messages inside a sheet or card |
Use alignment="center" for standalone screens and "left" when the message sits in a content
flow. Always match status to the real outcome: positive, danger, warning, brand (an etisalat
moment, not success) or neutral.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | |
alignment? | 'center' | 'left' | center | |
as? | 'h1' | 'h2' | 'h3' | h2 | Heading level for the title. |
description? | ReactNode | — | |
status? | 'brand' | 'warning' | 'positive' | 'danger' | 'neutral' | positive | Outcome the status icon reflects (lg and md only). |
statusIcon? | string | — | Replaces the status icon's default glyph. |
type? | 'lg' | 'md' | 'sm' | 'xs' | lg |
StatusIcon
The 56px tinted tile PageTitle uses, available on its own. icon swaps the glyph for any
name in the icon set.
| Prop | Type | Default | Description |
|---|---|---|---|
icon? | string | — | An icon-set name to replace the default glyph for this type. |
type? | 'brand' | 'warning' | 'positive' | 'danger' | 'neutral' | positive |
Design
Figma source: page-title — etisalat Consumer App DSL V1.2 · status-icon
- Gap 12 (
spacing/md), title-to-description 4 (spacing/xs), bottom padding 20 (spacing/xl). - Title sizes are bound to
font/size/7·6·5andheading/xs— a step below theheading/*text styles of the same names. Line height 110% (120% atxs); the title clamps at two lines. - Status tile:
status-icon/surface/<type>behind a 32px filled glyph instatus-icon/icon/<type>,border-radius/7.