Components
ServiceCard
A tappable service tile — a 48px icon over a two-line title, with an optional badge.
Figma description ·
.service-card-coreOpen in Figma ↗This component has no description in Figma yet.
Props
import SwiftUI import EandTokens // service-card: 148pt (row-2), r20, white, no border; padding 8/8/16, top-aligned. // A 48pt icon under a 24pt top pad, then a title/xs label, centred, 40pt tall (2 lines). // grid width 109 / carousel 128. Optional badge at 8,8. struct ServiceCard: View { let label: String; let icon: Image var body: some View { VStack(spacing: 0) { icon.resizable().scaledToFit() .frame(width: EandIcon.icon4xl, height: EandIcon.icon4xl) .padding(.top, EandSpacing.spacing2xl) Spacer(minLength: 0) Text(label) .font(.system(size: EandTypography.titleXs.size, weight: EandTypography.titleXs.weight)) .multilineTextAlignment(.center).lineLimit(2) .frame(height: EandScale.scale40) } .padding(.horizontal, EandSpacing.sm).padding(.top, EandSpacing.sm).padding(.bottom, EandSpacing.lg) .frame(width: 109, height: EandSection.bodyHeightRow2) .background(EandColor.surfaceCanvasDefault) .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius7)) } }
When to use
- Use for a catalogue of services, in a grid or a carousel inside a
Section of size
sm. - Don't use for the account shortcuts on the home screen (use QuickAction), or for a row with a description (use ActionBar).
Anatomy
- Icon —
icon, a 48px 3D icon, centred near the top. A placeholder shows when omitted. - Title —
labelintitle/xs, centred, in a fixed two-line block. - Badge —
badge, at the top start. The Figma symbol uses themdsize:<Badge offer="new-plan" size="md">New plan</Badge>.
size="grid" is 109px wide and size="carousel" 128px. Omit size to fill the grid track.
<ServiceCard icon={<img src={roaming} alt="" />} label="Roaming packs" badge={<Badge offer="new-plan" size="md">New plan</Badge>} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | |
badge? | ReactNode | — | A badge node, e.g. <Badge offer="new-plan" size="md">New plan</Badge>. |
icon? | ReactNode | <Icon name="placeholder" size={48} /> | |
size? | 'grid' | 'carousel' | — | Figma size axis; omit to let the cell fill its grid track. |
Design
Figma source: .service-card-core — etisalat Consumer App DSL V1.2 · sizes
- 148px tall (
row-2) at a 20px radius (border-radius/7); padding 8/8/16 (spacing/sm,spacing/lg), top-aligned. - Icon slot 48px (
icon/4xl) under 24px of top padding (spacing/2xl). - Title
title/xs(14px SemiBold) in a 40px block (scale/40). - Badge at 8, 8 (
spacing/sm). - Figma fills the card with a raw #ffffff; the code binds
surface/canvas/default, which has the same value.