Design System
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 — label in title/xs, centred, in a fixed two-line block.
  • Badge — badge, at the top start. The Figma symbol uses the md size: <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

PropTypeDefaultDescription
labelReactNode—
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.

On this page