Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
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. Use Grid, Heading, and Typography instead.
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.
Text box alignment (Card)
Use textBoxHorizontalAlign="right" to align the text box to the right.
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.
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.
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.
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.
Multi-Column Offer
Use multiColumnOffer with textBoxHorizontalAlign="center" to display up to 3 separate offers within the text box.
Double Banner
Use DoubleBanner, as a separate component, to wrap side-by-side, two full-width-image Banners, with a small gap between.
Banner as Link
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.
Short
Use height="short" to reduce the spacing and minimum height of the Banner.
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.
For CMS-driven pages, the old rainbow palette of color options has been replaced by the @vp/marketing-colors library. That library exports a broader color palette specifically intended for use in Banners on upper-funnel CMS-drive pages.
You can set the background colour by retrieving the desired color's HEX code from the library's MARKETING_COLORS object. Apply the retrieved HEX code to the --swan-public-marketing-background CSS custom property. The object also exposes a darkMode boolean.
Image
Use FluidImage instead of ResponsiveImage.
Alternatively, use a picture tag, where the fallback image inside is a FluidImage.
Image focal point
Deprecated imageFocalPoint on Banner component in SWAN 3.7.0
Instead use imageFocalPoint on the BannerImage or BannerSecondaryImage subcomponent
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, orright. - Y-axis:
top,center, orbottom.
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
textHorizontalAlignOnExtraSmall is deprecated in SWAN v3.3
The text will be by default center aligned on extra small screen size devices and to maintain the consistent user experience, we are removing this prop.
Use textHorizontalAlignOnExtraSmall="center" to center align the text on Extra-Small screens.
Hide image
Use hideImageOnExtraSmall to hide the image on Extra-Small screens.
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.
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.
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, Subtitle, and Display
Depending on the type of Banner, it might have a Display, a Title, or a Subtitle, but never all three.
- Use
BannerTitlefor general use cases. - Use together
BannerDisplayandBannerSubtitlefor promo setting, where Display is used for showing a discount. - For Banner
height="short", useBannerTitleorBannerDisplayandBannerSubtitle. - For Banner
withLeftHandNavigation, useBannerTitleonly.
Refer to Marketing Writing recommendations.
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
primaryButton at a time, unless the choices are of equal value. - There can be multiple Banners on a page, each with a
primaryButton. - 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.
Links
In the card variant, make the image clickable, following POUR principles:
- Multiple Buttons: use the same URL for both the
primaryButton and the image. - Two images, one Button: use the same URL for the
primaryButton and both images. - Two images, multiple Buttons: use the same links for the images as those used for the Buttons. Make sure the
primaryButton and the image showing on Medium to Extra-Small screens use the same URL.
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
Background color
Use the seasonal Holiday palette for the Banner’s background.
Typography
Use Tiempos font in Banners that sits in:
- Homepage.
- Deals page.
- Holiday hub.
- Holiday Gift Guide.
- Any other key holiday destinations on site.
Use Tiempos in either Title or Display.
Refer to Heading and Text usage.
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.
References
- W3: Understanding the Four Principles of Accessibility.
- Business Card Hero CTAs: Global Results (employees' resources).
Props
Banner
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.
| prop | type | required | description | default |
|---|---|---|---|---|
| height | "standard" | "short" | null | false | Height of the Banner
Available options: "standard", "short" | null |
| imageFocalPoint | "left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | null | false | ⚠️ Deprecated - Set `imageFocalPoint` on `BannerImage` or `BannerSecondaryImage` instead.
Sets the focal point if the image gets clipped. (X-axis first, then Y-axis) | null |
| variant | "card" | "full-width-image" | null | false | Visual type of banner
Available options: "card", "full-width-image" | null |
| twoImages | boolean | null | false | Whether the Banner has two images | null |
| multiColumnOffer | boolean | null | false | Whether the Banner has multiple discounts | null |
| textHorizontalAlignOnExtraSmall | "center" | "left" | null | false | ⚠️ 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" | null | false | How the text box should be aligned horizontally within the Banner.
Available options: "left", "center", "right" | null |
| withLeftHandNavigation | boolean | null | false | Specifies if the Banner's layout should adjust to fit a left hand navigation menu | null |
| preferSecondaryImage | boolean | null | false | Specifies if the Banner's secondary image should be shown if we are only showing one image | null |
| hideImageOnExtraSmall | boolean | null | false | Hides all image(s) on Extra-Small screens | null |
BannerOfferColumn
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.
BannerOfferColumns
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.
BannerDescription
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.
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
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.
| prop | type | required | description | default |
|---|---|---|---|---|
| imageFocalPoint | "left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | null | false | Sets the focal point if the image gets clipped. (X-axis first, then Y-axis) | null |
BannerImageContainer
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.
BannerLinks
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.
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
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.
| prop | type | required | description | default |
|---|---|---|---|---|
| imageFocalPoint | "left top" | "left center" | "left bottom" | "center top" | "center center" | "center bottom" | "right top" | "right center" | "right bottom" | null | false | Sets the focal point if the image gets clipped. (X-axis first, then Y-axis) | null |
BannerSecondaryImageContainer
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.
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
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.
BannerText
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.
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
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.
BannerWithLeftHandNavigationBelowBannerContents
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.
DoubleBanner
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.
| prop | type | required | description | default |
|---|---|---|---|---|
| hideFirstBannerBelowMedium | boolean | null | false | Whether to hide the first banner on screens smaller than Medium | null |
| hideSecondBannerBelowMedium | boolean | null | false | Whether to hide the second banner on screens smaller than Medium | null |
Was this page useful?
Published: Sep 7, 2023Last updated: Nov 21, 2024
