Component

ba-page-segment

This component is used to group related content and provide structure to our pages

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Design

Code

Accessibility

Anatomy

Padding and page margins

First page segment showing both top and bottom padding with page margins. This vertical spacing creates separation from surrounding content

Top padding of the following page segment

Second page segment with automatically removed top padding. When multiple segments with matching themes are stacked, the top padding is removed to prevent double spacing between them

Design Documentation

Over using the themes can result in a cluttered interface that creates visual complexity.

Live Demo

Page segment with default theme

Page segment with blue-200 theme

Page segment with midnight-700 theme

<ba-page-segment>
  <ba-content><p>Page segment with default theme</p></ba-content>
</ba-page-segment>
<ba-page-segment theme="blue-200">
  <ba-content><p>Page segment with blue-200 theme</p></ba-content>
</ba-page-segment>
<ba-page-segment theme="midnight-700">
  <ba-content><p>Page segment with midnight-700 theme</p></ba-content>
</ba-page-segment>

Properties and attributes

Property	Attribute	Description	Type	Default
`removeBottomPadding`	`remove-bottom-padding`	Removes the bottom padding from the page segment	`boolean \| undefined`	`false`
`removeTopPadding`	`remove-top-padding`	Removes the top padding from the page segment	`boolean \| undefined`	`false`
`theme`	`theme`	Sets the theme for the page segment	`"blue-200" \| "executive-club-blue-tier" \| "executive-club-bronze-tier" \| "executive-club-gold-tier" \| "executive-club-premier-tier" \| "executive-club-silver-tier" \| "midnight-500" \| "midnight-700" \| "sale" \| "the-club-blue" \| "the-club-bronze" \| "the-club-gold" \| "the-club-gold-guest-list" \| "the-club-premier" \| "the-club-silver" \| undefined`	`undefined`

Permitted ARIA roles

None

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<article>`, `<aside>`, `<ba‑accordion>`, `<ba‑cabin‑class‑group>`, `<ba‑card>`, `<ba‑card‑promo>`, `<ba‑card‑segmented>`, `<ba‑carousel>`, `<ba‑chart‑price>`, `<ba‑content>`, `<ba‑copy‑to‑clipboard>`, `<ba‑details>`, `<ba‑download>`, `<ba‑entry>`, `<ba‑flex>`, `<ba‑flight‑line>`, `<ba‑flight‑number>`, `<ba‑form>`, `<ba‑grid>`, `<ba‑image>`, `<ba‑link>`, `<ba‑link‑back>`, `<ba‑link‑entry>`, `<ba‑link‑price>`, `<ba‑link‑tile>`, `<ba‑loading‑skeleton>`, `<ba‑logo>`, `<ba‑message>`, `<ba‑pagination>`, `<ba‑progress‑meter>`, `<ba‑star‑rating>`, `<ba‑tab‑chip‑content>`, `<ba‑tab‑chip‑group>`, `<ba‑tab‑container>`, `<ba‑table>`, `<ba‑toolbar>`, `<div>`, `<footer>`, `<form>`, `<section>`

Parent components

ba-page-segment can be slotted into:

<ba‑tab‑chip‑content>

Usage

Basic usage

In most scenarios ba-page-segment will be the first and only child of the <main> element.

Stacking multiple page-segments on a page

<main>
  <ba-page-segment> ... </ba-page-segment>
  <ba-page-segment> ... </ba-page-segment>
  <ba-page-segment> ... </ba-page-segment>
  <ba-page-segment> ... </ba-page-segment>
</main>

Note on top padding, when stacking multiple page-segments

Sibling page ba-page-segment's with the same theme (either named or undefined) have the top padding removed

Stacking multiple themed page-segments on a page with notes on the padding applied by ba‑page‑segment

<main>
  <ba-page-segment>
    <!-- Has padding top and padding bottom -->
  </ba-page-segment>
  <ba-page-segment>
    <!-- Has only padding bottom -->
  </ba-page-segment>
  <ba-page-segment theme="sale">
    <!-- Has padding top and padding bottom -->
  </ba-page-segment>
  <ba-page-segment theme="sale">
    <!-- Has only padding bottom -->
  </ba-page-segment>
</main>

Removing top and or bottom padding

The top and bottom padding can be removed by using the following props remove-top-padding, remove-bottom-padding

Removing top and bottom padding

<main>
  <ba-page-segment remove-top-padding>
    <!-- Has no top padding -->
  </ba-page-segment>
  <ba-page-segment remove-bottom-padding>
    <!-- Has no bottom padding -->
  </ba-page-segment>
  <ba-page-segment remove-top-padding remove-bottom-padding>
    <!-- Has no top or bottom padding -->
  </ba-page-segment>
</main>

Guidelines

Use appropriate heading levels, landmarks, and semantic HTML within ba-page-segment to maintain document hierarchy and screen reader navigation.

No keyboard interactions have been defined for this component.

Usage and accessibility checklist

Use this checklist to confirm the component has been configured and used correctly.

UX checklist

ba-page-segment is used to group related content and provide visual structure to pages
Use themes to visually group related items on a page, helping users understand that content belongs together
Avoid over-using themed segments on a single page, as this creates visual complexity and clutter
Test with dynamic data to ensure proper spacing and padding in different scenarios
Sibling page segments with the same theme have top padding removed - i.e. there is not double padding between segments with the same theme

Accessibility checklist

ba-page-segment does not interfere with page navigation or screen reader flow
Content within ba-page-segment follows proper semantic structure

These checks are handled by the component and do not need to be repeated each time it is used.

ba-page-segment renders correctly in all BAgel themes
Colour contrast for all child bagel components meets WCAG standards
Adjacent segments with matching themes correctly remove duplicate top padding
High contrast mode unaffected by themes