Section

import SwiftUI
import EandTokens

// V1.2 section: radius 24, header padded 16/16/0 with a 40pt field row — 24pt title
// (heading/lg style) and the trigger (40pt section-link chevron, or a tertiary lg button).
// Body padded 16; its min height reserves the row for the card type it holds.
struct SectionView<Content: View>: View {
  let title: String; let context: String
  var bodyHeight: CGFloat = EandSection.bodyHeightRow3   // row-1 72 · 2 148 · 3 224 · 4 300 · 6 452
  @ViewBuilder var content: Content
  var body: some View {
    VStack(alignment: .leading, spacing: 0) {
      VStack(alignment: .leading, spacing: EandSpacing.xs) {
        HStack(spacing: 0) {
          Text(title)
            .font(.system(size: EandTypography.headingLg.size, weight: EandTypography.headingLg.weight))
            .lineLimit(1)
          Spacer(minLength: EandSpacing.md)
          SectionLinkButton(action: .forward)    // 40pt, r14, solid white
        }
        .frame(minHeight: EandScale.scale40)
        Text(context).font(.system(size: EandTypography.bodyMd.size))
          .foregroundColor(EandColor.textDefaultSubtle)
      }
      .padding([.top, .horizontal], EandSpacing.lg)
      content
        .frame(maxWidth: .infinity, minHeight: bodyHeight, alignment: .topLeading)
        .padding(EandSpacing.lg)
    }
    .foregroundColor(EandColor.textDefaultDefault)
    .background(EandColor.surfaceBaseDefault)
    .clipShape(RoundedRectangle(cornerRadius: EandRadius.radius8))
  }
}

When to use

• Use for every content block in a screen body: one section per group of cards, rows or tiles, with a title that says what the group is.
• Don't use to open a page; that is PageHeader, below the TopBar. Don't nest sections. For a page-end block of questions, use FAQ on the page canvas rather than styling questions inside a section.

Anatomy

• Header — title (24px bold, one or two lines through titleLine), an optional filterPill placed inline right after the title, and a trigger at the row end. context adds a body/md line under the row. showHeader={false} removes the header entirely.

• Trigger — chevron (default) is the 40px section-link button; button is a tertiary lg Button labelled triggerLabel (default "See all"); none hides it. Both call onTrigger.

• Body slot — children sit in a 16px-padded slot. size reserves the row height the card type needs:

  size	Slot height	Fits
  xs	72px	list rows, action bars
  sm	148px	quick-action and service tiles
  md	224px	deal, new-on and general cards
  lg	300px	plan and product cards
  xl	452px	highlight banners

• carousel makes the body scroll sideways and bleed to the section edges. gradient adds the sunset glow behind the body; reserve it for the most important section on the screen.

Choosing a surface

Use the glass surfaces only over imagery. On the inverse surfaces, pass inverse to the filter pill yourself; the title, context and trigger switch automatically.

<Section
  title="Plans for you"
  surface="midnight-base"
  filterPill={<FilterPill inverse>Postpaid</FilterPill>}
  trigger="button"
  triggerLabel="Manage"
  size="lg"
  carousel
>
  <PlanCard colorScheme="inverse" />
  <PlanCard colorScheme="inverse" />
</Section>

Props

Design

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

• 24px radius (border-radius/8). Header padding 16/16/0 (spacing/lg); a 40px field row (scale/40); the filter pill sits 8px after the title (spacing/sm); the trigger has 12px of inline-start padding (spacing/md).
• The title applies the heading/lg text style: 24px (font/size/7), 110%, snug tracking.
• Body padding 16. Slot heights bind section/body/height/row-N: 72, 148, 224, 300 and 452.
• The sunset glow is two layer-blurred ellipses, orange #fa700c and brand red #e00800 at 27% (25% on xs and sm), with the layer at 96%. Figma leaves these values unbound, so the code uses them as literals.
• The ai-powered gradient (#ffe4e3 to #f5f5f7) is also unbound. The glass surfaces carry no blur, because the published surface symbols have none.