Design System
Components

Highlight

The hero banner — an image under a midnight gradient, with a tag, a title, a subtitle and a glass action bar, in three sizes, single or stacked.

Figma description · highlightOpen in Figma ↗

Promotional banner card for featuring content, offers or app highlights.

Use for: promotional or editorial content inside a section body slot.

Not for: functional actions or navigation — use a card or action-bar.

Choosing: stacked for carousels, which is the common case. Single for a standalone placement.

Rules: sits inside a section, never directly on a page. Composes badges-offers for the offer tag and action-bar for the action row.

smilessmilessmiles
Exclusive venue deals every week
Save up to 50% with Smiles Unlimited
Smiles UnlimitedFrom AED 50/mo
Props
import SwiftUI
import EandTokens

// highlight lg: 452pt (row-6), r24, image + a midnight scrim (clear to 46%, 60% at 70%,
// 80% at the bottom). Content padded 16 top / 12: tag (glass logo row), 24pt title and
// body/md subtitle (2 lines each, inverse ink), then the glass action bar 16pt below.
// md 224 / sm 148 keep only the tag and the action bar.
struct Highlight: View {
  let title: String; let subtitle: String; let image: Image
  var body: some View {
    ZStack(alignment: .bottomLeading) {
      image.resizable().scaledToFill()
      LinearGradient(stops: [
        .init(color: EandColor.midnight1000.opacity(0), location: 0.46),
        .init(color: EandColor.midnightA60, location: 0.70),
        .init(color: EandColor.midnightA80, location: 1),
      ], startPoint: .top, endPoint: .bottom)
      VStack(alignment: .leading, spacing: 0) {
        LogoRow(logos: [Image("brand-smiles")]).padding(.bottom, EandSpacing.md)     // tag
        Text(title)
          .font(.system(size: EandTypography.headingLg.size, weight: EandTypography.headingLg.weight))
          .lineLimit(2)
        Text(subtitle).font(.system(size: EandTypography.bodyMd.size)).lineLimit(2)
        ActionBar(title: "Smiles Unlimited", subtitle: "From AED 49/mo")              // glass
          .padding(.top, EandSpacing.lg)
      }
      .foregroundColor(EandColor.textDefaultInverse)
      .padding(.top, EandSpacing.lg).padding([.horizontal, .bottom], EandSpacing.md)
    }
    .frame(height: EandSection.bodyHeightRow6)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius8))
  }
}

When to use

  • Use for the one or two campaigns that lead a screen, in a Section whose size matches the banner: xl for lg, md for md, sm for sm.
  • Don't use for a list of offers (use DealCard), for personalised suggestions (use Recommendation), or without artwork. With no image the banner falls back to a plain midnight placeholder.

Choosing a size

sizeHeightContent
lg (default)452pxTag, title and subtitle (two lines each), action bar
md224pxTag at the top, action bar at the bottom
sm148pxTag at the top, action bar at the bottom

The md and sm sizes hide the title and subtitle, as the published sizes do.

Anatomy

  • Image — image, a URL that covers the banner, under a midnight gradient that keeps the text legible.
  • Tag — tag="logos" (default) shows a glass row of partner logos; tag="badge" shows the Limited time badge, labelled by badge; tag="none" hides it.
  • Action bar — action={{ title, subtitle, cta, onCta }} renders a glass ActionBar with an md Button.
  • Stacked — placement="stacked" lays this banner and items out as 307px cards, 4px apart, so the next one peeks in.
<Highlight
  image="/campaigns/summer.jpg"
  title="Summer in the city"
  subtitle="Exclusive venue deals with Smiles"
  tag="badge"
  action={{ title: 'Smiles Unlimited', subtitle: 'From AED 25', cta: 'Play now', onCta: play }}
/>

Deprecated

V1.2 has one surface, image under a midnight gradient, and puts the call to action in the action bar. tone, background and the bare cta still render, but use image and action instead.

Props

PropTypeDefaultDescription
action?HighlightAction—Figma type=action — the glass action bar.
background?string—Deprecated. V1.2 has one surface: image + midnight gradient.
badge?ReactNode—Label for tag="badge". Default "Limited time offer".
cta?ReactNode—Deprecated. V1.2 has no bare CTA — use action. Still renders when no action is set.
image?string—Image URL for the banner fill.
items?HighlightItem[]—Further banners for placement="stacked".
logos?ReactNode[]—Logos for tag="logos"; Smiles placeholders otherwise.
placement?'single' | 'stacked'singleFigma placement. stacked lays this banner and items out as 307-wide peeking cards.
size?'lg' | 'md' | 'sm'lgFigma .highlight-sizes size. Default lg.
subtitle?ReactNode—Figma text-secondary-string (lg only).
tag?'none' | 'logos' | 'badge'logosFigma offer-tags. Default logos.
title?ReactNodePrimary Text 2-lines maxFigma text-primary-string (lg only).
tone?'brand' | 'image' | 'purple'imageDeprecated. V1.2 has one surface: image + midnight gradient (design-questions q2).
width?string | number—

Design

Figma source: highlight — etisalat Consumer App DSL V1.2

  • Heights bind row-6, row-3 and row-2; the radius is 24px (border-radius/8).
  • Gradient: transparent at 46% of the height, midnight/a60 at 70% and midnight/a80 at the bottom.
  • Padding: lg 16 at the top and 12 elsewhere (spacing/lg, spacing/md); md and sm 12 all round.
  • The title applies the heading/lg text style (24px, 110%); the subtitle is body/md. Both use text/default/inverse.
  • Tag: each logo sits in a 48px surface/glass/white/lg circle. The badge is lg on the lg banner and steps down to md and sm with the banner.

ServiceCard

A tappable service tile — a 48px icon over a two-line title, with an optional badge.

GeneralCard

A fixed 224px tile with a centred title, an image and an optional badge, for grids and carousels.

On this page

When to useChoosing a sizeAnatomyPropsDesign