<commit_before>---
title: Bands
---

_For all band options and API docs, see the [Band reference in Pattern Lab](/pattern-lab/?p=viewall-components-band)._

A band is a full width container that goes edge to edge on the display. Bands can contain multiple internal components, and help chunk related content together in a section of a page.

All band components can accept any of the color themes: `xdark,` `dark`, `light` and `xlight`. You can also add options such as background images, a texture, or an expandable video.

## Best Practices

### Use bands to group related information together

In Gestalt, the principle of common region states that [when objects are contained within the same closed region, they're perceived as belonging together](https://www.usertesting.com/blog/2016/02/24/gestalt-principles/). When putting information within a band, ensure that all the elements within the band relate to each other logically.

### Avoid "striping"

The goal of a layout is to create a clear visual hierarchy, and to allow users to consume the information in an effective way. Including too many bands on a page interrupts the flow of information and creates a visual stopping point that may reduce further engagement. In fact, evidence from usability testing shows that [long horizontal bands across the page, particularly if they end or begin near the bottom of the "fold," discourage people from scrolling](https://www.cxpartners.co.uk/our-thinking/the_myth_of_the_page_fold_evidence_from_user_testing/).

### Focus on legibility

When putting content in bands, make sure to pay attention to the legibility of the content against the background. Avoid choosing "busy" images that create too much noise in the background, or using an image that's too light for the text on top of it.

## Examples

Below are the most commonly used band types with examples.<commit_msg>docs: add docs for full-bleed background images<commit_after>---
title: Bands
---

_For all band options and API docs, see the [Band reference in Pattern Lab](/pattern-lab/?p=viewall-components-band)._

A band is a full width container that goes edge to edge on the display. Bands can contain multiple internal components, and help chunk related content together in a section of a page.

All band components can accept any of the color themes: `xdark,` `dark`, `light` and `xlight`. You can also add options such as background images, a texture, or an expandable video.

## Best Practices

### Use bands to group related information together

In Gestalt, the principle of common region states that [when objects are contained within the same closed region, they're perceived as belonging together](https://www.usertesting.com/blog/2016/02/24/gestalt-principles/). When putting information within a band, ensure that all the elements within the band relate to each other logically.

### Avoid "striping"

The goal of a layout is to create a clear visual hierarchy, and to allow users to consume the information in an effective way. Including too many bands on a page interrupts the flow of information and creates a visual stopping point that may reduce further engagement. In fact, evidence from usability testing shows that [long horizontal bands across the page, particularly if they end or begin near the bottom of the "fold," discourage people from scrolling](https://www.cxpartners.co.uk/our-thinking/the_myth_of_the_page_fold_evidence_from_user_testing/).

### Focus on legibility

When putting content in bands, make sure to pay attention to the legibility of the content against the background. Avoid choosing "busy" images that create too much noise in the background, or using an image that's too light for the text on top of it.

### Full-bleed background images

Full-bleed background images grow to fill the available space. On wider screens they scale up. On narrower screens they scale down. Depending upon how much content is inside the container, the image scales further. Therefore, it's hard to know just how much of your image will be visible on each device.

The best practice is to use full-bleed background images as decoration only. They should not contain content that would be confusing or distracting if it were cropped out. You may use an image with an interesting focal point, just be sure it would still make sense visually if only partially visible.

## Examples

Below are the most commonly used band types with examples.
{'fraction_non_alphanumeric': 0.053712480252764615, 'fraction_numerical': 0.003610923042202663, 'mean_word_length': 4.624365482233503, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 4, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3624370', 'n_tokens_mistral': 1082, 'n_tokens_neox': 1038, 'n_words': 648}