Design System
Components

DealCard

The deals card — an overline, a two-line title, partner logos, a discount with the old price, the price and a like pill.

Figma description · deals-card/ltrOpen in Figma ↗

This component has no description in Figma yet.

Dining
50% off at Smiles venues
smilessmiles+4
50% offAED 120
AED 60
12.4k
Streaming
3 months of OSN+ on us
smilessmiles+4
100% offAED 105
AED 0
8.1k
Props
import SwiftUI
import EandTokens

// deals-card: 166×224 (col-12 × row-3), r16, white, padding 12, no border.
// Header: body/sm overline, heading/xs title (2 lines), logo row sm. Footer (80pt,
// bottom-aligned): md Discount badge + struck-through old price, title/md price, and a
// 24pt feedback pill (thumbs up · count | thumbs down) on midnight glass 7%.
struct DealCard: View {
  var body: some View {
    VStack(alignment: .leading, spacing: EandSpacing.xs) {
      Text("Cinema").font(.system(size: EandTypography.bodySm.size))
        .foregroundColor(EandColor.textDefaultSubtle)
      Text("2 for 1 tickets every weekend")
        .font(.system(size: EandTypography.headingXs.size, weight: EandTypography.headingXs.weight))
        .lineLimit(2)
      Spacer(minLength: 0)
      HStack(spacing: EandSpacing.xs) {
        OfferBadge(text: "50% off")
        Text("AED 90").strikethrough().font(.system(size: EandTypography.bodySm.size))
          .foregroundColor(EandColor.textDefaultMuted)
      }
      Text("AED 45")
        .font(.system(size: EandTypography.titleMd.size, weight: EandTypography.titleMd.weight))
        .foregroundColor(EandColor.midnight1100)       // legacy High-emphasis #140f21
      FeedbackPill(likes: 128)
    }
    .padding(EandSpacing.md)
    .frame(width: EandSection.bodyWidthCol12, height: EandSection.bodyHeightRow3, alignment: .topLeading)
    .background(EandColor.surfaceBaseInverse)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius6))
  }
}

When to use

  • Use for offers in a "Deals for you" carousel, in a Section of size md.
  • Don't use for plans (use PlanCard), for products and add-ons (use ProductCard), or for picture-led announcements (use NewCard).

Anatomy

  • Header — overline in body/sm subtle, then title in bold 16px, up to two lines. The header takes the free height, so removing the logo row moves nothing else.
  • Logos — logos, the small logo row; true shows placeholders.
  • Footer — bottom-aligned, in a fixed 80px:
    • discount, the md Discount badge, beside wasPrice, the old price struck through;
    • price in title/md;
    • a feedback pill with thumbs up, the likes count and thumbs down. It appears when likes, onLike or onDislike is set.
<DealCard
  overline="Smiles"
  title="20% off your next dinner"
  logos
  discount="20% off"
  wasPrice="AED 500"
  price="AED 400"
  likes="120.8k"
  onLike={like}
  onDislike={dislike}
/>

Deprecated

The V1.1 deal card was an image card. subtitle is now overline and badge is now discount (a label). image still renders, in the logo-row slot, but the V1.2 deals card has no image.

Props

PropTypeDefaultDescription
badge?ReactNode—Deprecated. Use discount (a label). A node passed here renders in the discount row.
discount?ReactNode—Figma discount — the md Discount badge label, e.g. "20% off".
image?ReactNode—Deprecated. V1.1 image card. Rendered in the logo-row slot; Figma's deals card has no image.
likes?ReactNode—Like count in the feedback pill, e.g. "120.8k". Setting it (or a handler) shows the pill.
logos?boolean | ReactNode[]—Figma logo-row (sm). true shows placeholders.
onDislike?(() => void)—
onLike?(() => void)—
overline?ReactNode—Figma overline-string.
price?ReactNode—Figma price-string, e.g. "AED 400".
subtitle?ReactNode—Deprecated. Use overline.
title?ReactNodeDeal titleFigma title-string — two lines max.
wasPrice?ReactNode—Figma discounted-string — the struck-through old price, e.g. "AED 500".
width?string | numberT.section.body.width['col-12']

Design

Figma source: deals-card — etisalat Consumer App DSL V1.2

  • 166 × 224 (section/body/width/col-12 × row-3) at a 16px radius (border-radius/6), padding 12 (spacing/md), on surface/base/inverse. No border, no image.
  • The title applies the heading/xs text style: 16px at 120%.
  • Logo row 48px tall, including 12px below; footer 80px, gap 4 (spacing/xs).
  • Feedback pill: 24px tall on surface/glass/midnight/sm, with a 1px divider in border/surface-based/canvas/inverse between the thumbs.
  • The price binds a legacy ink (#140f21) that has no V1.2 token, so it is a literal.

On this page