Card

import SwiftUI
import EandTokens

// Card (code-only, no V1.2 symbol): raised white, r20, no border, padding 16, gap 4.
// title/sm, body/md subtle, the action 8pt below. surface inverse = midnight-raised.
struct CardView<Action: View>: View {
  let title: String; let text: String
  @ViewBuilder var action: Action
  var body: some View {
    VStack(alignment: .leading, spacing: EandSpacing.xs) {
      Text(title).font(.system(size: EandTypography.titleSm.size, weight: EandTypography.titleSm.weight))
      Text(text).font(.system(size: EandTypography.bodyMd.size))
        .foregroundColor(EandColor.textDefaultSubtle)
      action.padding(.top, EandSpacing.sm)
    }
    .padding(EandSpacing.lg)
    .frame(maxWidth: .infinity, alignment: .leading)
    .background(EandColor.surfaceRaisedDefault)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius7))
  }
}

When to use

• Use on existing screens that need free-form content: media of any height, a title, a paragraph and an action.
• Don't use in new designs where a published card fits: GeneralCard for general tiles, PlanCard for plans, ProductCard for products and add-ons, DealCard for offers.

Anatomy

• Media — media spans the full width at the top; the card clips it to its corners.
• Content — a 16px-padded column with a 4px gap: title (title/sm), body (body/md, subtle), then children, then action 8px further down.
• Width — fills its container by default. Pass width to use the card as a carousel cell.

surface="default" is white and surface="inverse" is midnight-raised. This naming is the reverse of GeneralCard, whose default is the dark card, as Figma publishes it.

Props

Design

Card has no V1.2 symbol. Its nearest published relative is General-card — etisalat Consumer App DSL V1.2, built as GeneralCard.

• 20px radius (border-radius/7), clipped.
• Content padding 16 (spacing/lg), gap 4 (spacing/xs).
• Surfaces: surface/raised/default (white) or surface/raised/midnight (#312c40) with inverse ink.