Band

Overview

Band is a container component that provides a set of slots in which to render banded content.

Installation

npm install @patternfly/pfe-band

Usage

  <pfe-band>
    <h2 slot="header">Header Slot</h2>
    <p>This content is in the main slot. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata dolor sit amet.</p>
    <pfe-card slot="aside" color-palette="lightest">
      <h3 slot="header">Aside slot</h3>
      <p>Content for a card that is in the aside slot.</p>
    </pfe-card>
    <p slot="footer">This is the footer slot.</p>
    <pfe-cta slot="footer">
      <a href="#">Learn more</a>
    </pfe-cta>
  </pfe-band>

Slots

header

This slot renders at the top of the container and generally contains the title, headline, and/or subheadline content. Other possible candidates include a set of social sharing links or tags that describe the content below. The template is automatically wrapping this slot in a header tag. Recommend using h-level or p tags inside this slot.

Default Slot

This unnamed slot should contain the bulk of the content in this element. The template is automatically wrapping all content within an article tag.

footer

This slot is typically used for calls-to-action or footnotes and is pushed to the bottom of the container. Recommended tags include pfe-cta. The template is automatically wrapping this slot in a footer tag.

aside

This slot is for content that should be rendered to the right or left of the default slot on desktop. Asides often contain pfe-card or interest forms which provide users a little more information or context for the band. The template is automatically wrapping this slot in an aside tag.

Attributes

img-src

Optional background image applied to the entire band container. Alignment of this image can be managed using the --pfe-band--BackgroundPosition variable which is set to center center by default.

DOM Property

imgSrc

Type

string

Default

''

color-palette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

Band always resets its context to base, unless explicitly provided with a color-palette.

DOM Property

colorPalette

Type

ColorPalette

Default

'base'

on

Sets color theme based on parent context

DOM Property

on

Type

ColorTheme | undefined

Default

unknown

aside-desktop

This influences where the aside is rendered at the desktop view and are indicated relative to the body content.

DOM Property

asideDesktop

Type

'right'|'left'

Default

'right'

aside-mobile

This influences the position of the aside in the mobile view as well as where in the DOM the aside markup is rendered.

These names are relative to the body content.

DOM Property

asideMobile

Type

'top'|'bottom'

Default

'bottom'

aside-height

This influences the height of the aside region relative to the body content.

A full height starts at the top of the band and spans the header, body, and footer regions. A body height spans the body and footer regions only with the header region sitting above it in the rendered view.

DOM Property

asideHeight

Type

'full'|'body'

Default

'body'

size

Optionally adjusts the padding on the container.

DOM Property

size

Type

'small' | undefined

Default

unknown

use-grid

Default grid on for the light DOM regions (header, body, footer, aside)

DOM Property

useGrid

Type

boolean

Default

false

Methods

Events

CSS Custom Properties

Vertical and horizontal padding

--pfe-band--Padding--vertical and --pfe-band--Padding--horizontal accept size values such as px, em, rem, etc.

Background color

Though using the color attribute is strongly recommended when setting the background color for the band, you can also use completely custom colors by updating the --pfe-band--BackgroundColor variable. If you update this value manually, you should also update the --theme context variable to invoke the right theme on it and it's child elements. Supported themes include: light, dark, and saturated.

Background position

This is designed for use with the img-src attribute to allow you to align your background image. Default value is center center.

Border

This allows the customization of a border around the entire container and is primarily designed to be used to add a top and/or bottom border line. This variable accepts the entire border shorthand and is set to transparent by default.

Layout

The band has a rudimentary layout system designed to be used inside the slot regions for the header, body, footer, and aside. It uses the CSS grid spec and creates a stacked layout by default. By updating these values, you will be able to create simple grid layouts. Please note that these do not include fallbacks for older browsers.

Possible values include: 1fr 1fr, repeat(3, 1fr), repeat(auto-fill, minmax(300px, 1fr))

CSS Shadow Parts

base

Container for all elements in shadowroot.

header

Container for the slotted header elements.

body

Container for the slotted content.

wrapper

Container for header and body elements (only available when asideHeight = "full").

aside

Container for the slotted aside elements.

footer

Container for the slotted footer elements.