⚠️ 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.
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.
Use textBoxHorizontalAlign="right" to align the text box to the right.
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.
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:
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.
A Banner with variant="full-width-image" features a BannerImageContainer that spans the entire width and height of the Banner, positioned underneath the BannerTextContainer.
Use textBoxHorizontalAlign="center" to align the text box to the center.
Use textBoxHorizontalAlign="right" to align the text box to the right.
Use multiColumnOffer with textBoxHorizontalAlign="center" to display up to 3 separate offers within the text box.
Use DoubleBanner, as a separate component, to wrap side-by-side, two full-width-image Banners, with a small gap between.
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.
Use height="short" to reduce the spacing and minimum height of the Banner.
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.
Use FluidImage instead of ResponsiveImage.
Alternatively, use a picture tag, where the fallback image inside is a FluidImage.
Use imageFocalPoint to adjust the focus of a Banner’s image for when it clips. This prop takes two values (the default is imageFocalPoint="center center") and is consistent across breakpoints:
left, center, or right.top, center, or bottom.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.
⚠️ 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.
Use hideImageOnExtraSmall to hide the image on Extra-Small screens.
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.
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.
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.
Depending on the type of Banner, it might have a Display, a Title, or a Subtitle, but never all three.
BannerTitle for general use cases.BannerDisplay and BannerSubtitle for promo setting, where Display is used for showing a discount.height="short", use BannerTitle or BannerDisplay and BannerSubtitle.withLeftHandNavigation, use BannerTitle only.Refer to Marketing Writing recommendations.
Use the following characters recommendations (space included) for a visually balanced banner:
The preview has been updated.
primary Button at a time, unless the choices are of equal value.primary Button.In the card variant, make the image clickable, following POUR principles:
primary Button and the image.primary Button and both images.primary Button and the image showing on Medium to Extra-Small screens use the same URL.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.
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:
Refer to the SWAN UI Kit for visual indications regarding clipping and safe areas (employees' resources).
Download the PSD templates (employees' resources).
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.
Use the seasonal Holiday palette for the Banner’s background.
Use Tiempos font in Banners that sits in:
Use Tiempos in either Title or Display.
Refer to Heading and Text usage.
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.
ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| height | "standard" | "short" | null | false | Height of the Banner
Available options: "standard", "short" | 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 |
| 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 |
ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.<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.<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.<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.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.<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.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.<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.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.<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.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| 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 |
