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 —
titleinheading/xs. - Link —
link(default "See all") inbutton/smandtext/brand/default, followed by a 16pxchevron-right-sm. It callsonLinkClick.
The row is 40px tall, with the title and link at opposite ends.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
link? | ReactNode | See 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.