Vistaprint
styleKeydetailsBanner

Details Banner

A Details Banner shows an image, and alongside it some details about the content shown in the image.

Playground

The details section is a neutral container, into which you can put whatever content you want.

An example heading

You can put whatever content you want inside the text zone, and then use Visage's type and spacing options to adjust that content. Here we're showing an h3 heading, a paragraph of text, and a button, all using default spacing and type.

Share
Share
jsx
jsx
<DetailsBanner>
  <DetailsBannerImage>responsive or fluid image goes here</DetailsBannerImage>
  <DetailsBannerText>details content</DetailsBannerText>
</DetailsBanner>
<div class="details-banner">
  <div class="details-banner-image">responsive or fluid image goes here</div>
  <div class="details-banner-text">details content</div>
</div>

Text on the left

You can make the text appear on the left side, and the image appear on the right.

This banner has its text on the left side instead.

Share
Share
jsx
<div class="details-banner details-banner-text-left">etc</div>
``

Staggered

The "staggered" option makes the image and the background staggered. It is typically used with a background color on the banner so that you can see the staggering.

A staggered Details Banner
Share
Share
jsx
<div
  class="
    details-banner details-banner-staggered details-banner-background
    background-color-holiday
  "
>
  etc
</div>

Components

DetailsBanner

PropTypeDefaultDescription
textLeftbooleanfalse

Whether or not the text should show on the left side.

staggeredbooleanfalse

Whether or not the background should be staggered.

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)

DetailsBannerImage

DetailsBannerImage has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

Guidelines

Designer Guidelines

  • Images should have a 16:3 aspect ratio on most screens, but 4:3 on Extra-Small screens.