ba-page-segment

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

GitHub

Storybook

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>

Guidelines

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

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`theme`	`theme`	Set's the theme for this container and all subcomponents	`sale \| blue-200 \| midnight-500 \| midnight-700 \| "the-club-blue" \| "the-club-bronze" \| "the-club-silver" \| "the-club-gold" \| "the-club-gold-guest-list" \| "the-club-premier" \| undefined`	`undefined`

Slots

Slot	Description	Permitted elements
Unnamed slot	Elements will render in the body of the component	`<article>`, `<aside>`, `<ba‑accordion>`, `<ba‑card>`, `<ba‑card‑promo>`, `<ba‑card‑segmented>`, `<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‑loading‑skeleton>`, `<ba‑logo>`, `<ba‑message>`, `<ba‑star‑rating>`, `<ba‑tab‑chip‑content>`, `<ba‑tab‑chip‑group>`, `<ba‑tab‑container>`, `<ba‑toolbar>`, `<div>`, `<footer>`, `<form>`, `<section>`

Permitted ARIA roles

None

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>