<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Banner

A powerful tool to showcase promotional offers, simplify user journeys and reinforce brand perception through visual storytelling.
styleKeys: banner

Use Banner...

  • To showcase promotional offers and seasonal events.
  • To simplify user journeys by presenting clear call-to-action.
  • To reinforce brand perception through visual storytelling.
  • For what it’s intended for —pairing text and imagery with marketing or editorial purpose.

Don't use Banner...

  • To provide critical information to customers. Use Alert Box instead.
  • To display a large variety of content. Use Standard Tile or Card instead.
  • If its presentation needs to deviate from its orginal marketing and editorial purpose. Combine other SWAN components to create your desired layout. Find out more.


Card

In the React API, card is the default Banner variant, while in the Vanilla API, you need to explicitly specify the variant.

A Banner with variant="card" features a BannerTextContainer aligned to the left by default, and a BannerImageContainer that covers the remaining half of the Banner.

The preview has been updated.

Text box alignment (Card)

Use textBoxHorizontalAlign="right" to align the text box to the right.

The preview has been updated.

Two images

Use twoImages and set textBoxHorizontalAlign="center" to display two images on Large and Extra-Large screens. On smaller screens, only the right image will show.

Use preferSecondaryImage to display the left image instead.

The preview has been updated.

with Left Hand Navigation

Use withLeftHandNavigation to add a Left Hand Navigation on the left of the Banner. If the navigation is taller than the Banner, it will spill over into the area below the Banner.

Use the BannerWithLeftHandNavigationBelowBanner helper component to add content below the Banner. This container:

  • Adds spacing to the left to ensure that the navigation doesn’t overlap with the content.
  • Automatically wraps the content with a Bounded Content component.

The Left Hand Navigation is hidden on Small and Extra-Small screens. Make sure its links are available elsewhere on the page, whether it’s in the top navigation or within the page content.

The preview has been updated.

Full-width image

A Banner with variant="full-width-image" features a BannerImageContainer that spans the entire width and height of the Banner, positioned underneath the BannerTextContainer.

The preview has been updated.

Text box alignment (for Full-Width Image)

Use textBoxHorizontalAlign="center" to align the text box to the center.

Use textBoxHorizontalAlign="right" to align the text box to the right.

The preview has been updated.

Multi-Column Offer

Use multiColumnOffer with textBoxHorizontalAlign="center" to display up to 3 separate offers within the text box.

The preview has been updated.

Double Banner

Use DoubleBanner, as a separate component, to wrap side-by-side, two full-width-image Banners, with a small gap between.

The preview has been updated.

Editorial (Holiday)

Use editorial for storytelling moments, consumer-driven marketing moments, and for Holiday-related campaigns. This prop modifies BannerTitle and BannerDisplay to use Tiempos, per Brand guidelines.

Use this prop sparsely - most banners should not be editorial themed.

The preview has been updated.

In the React API, use render for a whole Banner with the behaviour of a Link.

In the Vanilla API, use an a tag for the Banner.

The preview has been updated.

Height

Use height="short" to reduce the spacing and minimum height of the Banner.

The preview has been updated.

Background color

Use bgc or backgroundColor to set the background color of the Banner.

Use darkMode to use dark mode settings on darker colors.

For the full-with-image variant, the React API version applies the same color to the background of the text box that floats over the image.

For the Vanilla API, use the same background color for both the Banner and the Banner Text sub-component.

Refer to Color's guidelines.

The preview has been updated.

Image

Use FluidImage instead of ResponsiveImage.

Alternatively, use a picture tag, where the fallback image inside is a FluidImage.

Image focal point

use imageFocalPoint to adjust the focus of a banner's image when it clips. This can be applied in both the BannerImage and BannerSecondaryImage subcomponent. This prop takes two values (the default is imageFocalPoint="center center") and is consistent across breakpoints:

  • X-axis: left, center, or right.
  • Y-axis: top, center, or bottom.

Refer to guidelines

The preview has been updated.

Video

Use video to replace the img or picture tag.

In the React API, use video loop playsInline autoPlay to configure a video to loop, play inline, and autoplay.

Small and Extra-Small screens

Text horizontal alignment

Use textHorizontalAlignOnExtraSmall="center" to center align the text on Extra-Small screens.

The preview has been updated.

Hide image

Use hideImageOnExtraSmall to hide the image on Extra-Small screens.

The preview has been updated.

Hide one Banner inside a Double Banner

Use hideFirstBannerBelowMedium to hide the first (left) banner on Small and Extra-Small screens.

Use hideSecondBannerBelowMedium to hide the second (right) banner on Small and Extra-Small screens.

The preview has been updated.

Accessibility

In the React API, BannerTitle defaults to a <p> tag. Use structural headings tags from <h1> through <h6> accordingly to the page structure.

Ensure every Banner image has an alt attribute.

Use the appropriate mode to ensure color contrast.

Refer to Color's guidelines.

Layout

Use Banner outside of a Bounded Content component to make it span the full screen width and touch the edges of the browser window (max width: 1920px).

Use Banner inside a Grid to align with the rest of the content in the page.

Use Banner with height="short" on the Homepage when positioned as a 'Hero', as it performs better than the standard height.

Content

Title, Display, and Subtitle

Use BannerTitle for standard Banners.

Use BannerDisplay and (optionally) BannerSubtitle for promotional Banners. Use BannerDisplay to highlight discounts — "XX% off", and BannerSubtitle for additional information — "when you order two or more X". If two large key offers need to be communicated, use BannerDisplay for the first discount — "XX% off X", and BannerSubtitle for the others — "XX% off Y and Z".

Every Banner must at least use BannerTitle or BannerDisplay.

Don't use:

  • BannerTitle and BannerSubtitle together
  • BannerTitle and BannerDisplay together
  • BannerTitle, BannerDisplay and BannerSubtitle together
  • BannerDisplay or BannerSubtitle on Banners withLeftHandNavigation

Text length

Use the following characters recommendations (space included) for a visually balanced banner:

  • Eyebrow: 20 ~ 30 ch.
  • Display: 15 ch.
  • Title: 40 ch.
  • Subtitle: 30 ch.
  • Description: 115 ch (~ 180 ch in other languages than English).
  • Footnote: 80ch (~ 150 ch in other languages than English).

The preview has been updated.

Buttons and links

Buttons

  • Use only one primary Button at a time, unless the choices are of equal value.
  • There can be multiple Banners on a page, each with a primary Button.
  • Note: Buttons on Banners have a different appearance. This is to ensure they work with arbitrary background colours. They are not able to be used in other contexts outside of Banners.
  • If the whole Banner is clickable, avoid placing multiple links within the text area or around the Banner's image since HTML does not permit nesting a link within another link.
  • Use multiple Buttons over a combination of Button and Link.

Refer to Button guidelines.

Links

In the card variant, make the image clickable, following POUR principles:

  • Multiple Buttons: use the same URL for both the primary Button and the image.
  • Two images, one Button: use the same URL for the primary Button and both images.
  • Two images, multiple Buttons: use the same links for the images as those used for the Buttons. Make sure the primary Button and the image showing on Medium to Extra-Small screens use the same URL.

The preview has been updated.

Image

Style

For the card variant, use product-focused images and use the same link as the Button(s).

For the full-width-image variant, use lifestyle images that allow for more flexibility for the text to overlap with the image.

Size

The height of a Banner is based on the height of its text contents. The image will be scaled and clipped as necessary until it covers the image area. Guidance values:

  • Card | Default: 920x500 (x2, Retina).
  • Card | Two Images: 640x500 (x2).
  • Card | with Left Navigation: 890x500 (x2).
  • Full-Width Image: 1920x500 (x2).
  • Double Banner: 1000x500 (x2).

Refer to the SWAN UI Kit for visual indications regarding clipping and safe areas (employees' resources).

Download the PSD templates (employees' resources).

Video

Use videos as animating backgrounds, not videos where the user would want to play/pause it.

Since videos in a Banner can't show play/pause buttons, in order to meet accessibility requirements, they need to be less than 5 seconds in length, and have no sound.

Holiday

For Holiday-related campaigns, use the editorial prop.

Examples of areas to use Editorial Banners for Holiday campaigns are:

  • Homepage.
  • Deals page.
  • Holiday hub.
  • Holiday Gift Guide.
  • Any other key holiday destinations on site.

Background color

Use the seasonal Holiday palette for the Banner’s background.

Refer to Color’s guidelines.

SEO

In the React API, BannerTitle defaults to a <p> tag. Use structural headings tags from <h1> through <h6> accordingly to the page structure.

Use HTML text rather than embedding text directly into images.

Ensure every Banner image has an alt attribute.

Image and text layout

If you are positioning text content alongside an image, and it does not have an editorial or marketing purpose, the Banner component may not be suitable. Use Grid, Heading, Typography, and other components to achieve your desired layout.

The preview has been updated.

References

Props

Banner
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
variant"card" | "full-width-image" | nullfalse
The visual style of the Banner Available options: "card", "full-width-image"
card
twoImagesboolean | nullfalse
Whether the Banner has two images
false
multiColumnOfferboolean | nullfalse
Whether the Banner has multiple discounts
false
height"standard" | "short" | nullfalse
Height of the Banner Available options: "standard", "short"
standard
textHorizontalAlignOnExtraSmall"center" | "left" | nullfalse
⚠️ Deprecated - The text will be by default center aligned on extra small screen size devices and to maintain the consistent user experience, we are deprecating this prop.
How the text itself should be aligned horizontally within the Banner, when on mobile. Available options: "left", "center"
null
textBoxHorizontalAlign"center" | "left" | "right" | nullfalse
How the text box should be aligned horizontally within the Banner. Available options: "left", "center", "right"
left
withLeftHandNavigationboolean | nullfalse
Specifies if the Banner's layout should adjust to fit a left hand navigation menu
false
preferSecondaryImageboolean | nullfalse
Specifies if the Banner's secondary image should be shown if we are only showing one image
false
hideImageOnExtraSmallboolean | nullfalse
Hides all image(s) on Extra-Small screens
false
editorialboolean | nullfalse
Styles the appropriate Banner subcomponents with different font styling
false
imageFocalPoint"left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | nullfalse
⚠️ Deprecated - Set `imageFocalPoint` on `BannerImage` or `BannerSecondaryImage` instead.
null
BannerOfferColumn
See core props for additional props that can be applied to this component.
BannerOfferColumns
See core props for additional props that can be applied to this component.
BannerDescription
See core props for additional props that can be applied to this component.
BannerDisplay
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
BannerEyebrow
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
BannerFootnote
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
BannerImage
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
imageFocalPoint"left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | nullfalse
Sets the focal point if the image gets clipped. (X-axis first, then Y-axis)
null
BannerImageContainer
See core props for additional props that can be applied to this component.
BannerLinks
See core props for additional props that can be applied to this component.
BannerPrice
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
BannerSecondaryImage
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
imageFocalPoint"left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | nullfalse
Sets the focal point if the image gets clipped. (X-axis first, then Y-axis)
null
BannerSecondaryImageContainer
See core props for additional props that can be applied to this component.
BannerSubtitle
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
BannerTextContainer
See core props for additional props that can be applied to this component.
BannerText
See core props for additional props that can be applied to this component.
BannerTitle
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
BannerWithLeftHandNavigationBelowBanner
See core props for additional props that can be applied to this component.
BannerWithLeftHandNavigationBelowBannerContents
See core props for additional props that can be applied to this component.
DoubleBanner
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
hideFirstBannerBelowMediumboolean | nullfalse
Whether to hide the first banner on screens smaller than Medium
null
hideSecondBannerBelowMediumboolean | nullfalse
Whether to hide the second banner on screens smaller than Medium
null