Design System
Components

SectionLink

A code-only header row — a heading with a “See all” link. Inside a Section, use the Section header instead.

Deals for you
import SwiftUI
import EandTokens

// Section header row (code-only): title left, "See all" link + chevron right.
// The 40pt round trigger in a Section header is SectionLinkButton.
struct SectionLink: View {
  let title: String; let link: String
  var body: some View {
    HStack {
      Text(title).font(.system(size: EandTypography.headingXs.size, weight: .bold))
      Spacer()
      HStack(spacing: 2) {
        Text(link).font(.system(size: EandTypography.buttonSm.size, weight: .semibold))
        Image(systemName: "chevron.right").font(.system(size: EandIcon.md))
      }.foregroundColor(EandColor.textBrandDefault)
    }
    .frame(height: 40)
  }
}

No V1.2 symbol

Figma DSL V1.2 publishes no standalone title and "See all" row. The published equivalent is the header of Section, with its title and trigger.

When to use

  • Use only outside a Section, where a custom layout needs a heading with a text link.
  • Don't use inside a Section: its header already provides the title and the trigger, as a chevron button or a "See all" button.

Anatomy

  • Title — title in heading/xs.
  • Link — link (default "See all") in button/sm and text/brand/default, followed by a 16px chevron-right-sm. It calls onLinkClick.

The row is 40px tall, with the title and link at opposite ends.

Props

PropTypeDefaultDescription
link?ReactNodeSee all
onLinkClick?(() => void)—
title?ReactNode—

Design

SectionLink is code-only. Its Figma counterpart is the header of section — etisalat Consumer App DSL V1.2.

  • 40px row; the link's label and chevron sit 2px apart.
  • The chevron comes from the icon set, not a typed character.

On this page