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.
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 —
overlineinbody/smsubtle, thentitlein 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;trueshows placeholders. - Footer — bottom-aligned, in a fixed 80px:
discount, themdDiscount badge, besidewasPrice, the old price struck through;priceintitle/md;- a feedback pill with thumbs up, the
likescount and thumbs down. It appears whenlikes,onLikeoronDislikeis 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
| Prop | Type | Default | Description |
|---|---|---|---|
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? | ReactNode | Deal title | Figma title-string — two lines max. |
wasPrice? | ReactNode | — | Figma discounted-string — the struck-through old price, e.g. "AED 500". |
width? | string | number | T.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), onsurface/base/inverse. No border, no image. - The title applies the
heading/xstext 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 inborder/surface-based/canvas/inversebetween the thumbs. - The price binds a legacy ink (#140f21) that has no V1.2 token, so it is a literal.