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.
ShareText 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.
Height
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.