Vistaprint
styleKeysstandardBanner

Standard Banner

Standard Banner represents the site-standard banner in the middle of a page. (For the hero banners at the top of a page, see Standard Hero instead.)

Standard Banners come in these possible layouts:

  • "half-and-half", where the text sits beside the banner image, each taking up half of the width

  • "full-width-image", where image fills the whole banner, and the text is overlaid on top

  • "two-images", where the text sits between two different images (except on small screens, where one image is hidden)

  • "side-by-side", where there are two different banners sitting on the same row

Standard Banners do not inherently have any background color behind them, but you can add some by using the Background Color feature (and Dark Mode, as necessary).

Half-and-Half

The "half-and-half" layout places the text and image beside each other, with each taking up half of the available width on desktop screens. (On smaller screens, the banner is vertically oriented instead.)

Placeholder

optional eyebrow

Heading

Description goes here.

$price

Placeholder

Heading

Here's a banner with three CTA buttons.

$price

Placeholder

Heading

This banner has a CTA link instead of a CTA button.

$price

CTA link

Share
Share
jsx
<div class="standard-banner">
  <div class="standard-banner-image-container">
    <div class="standard-banner-image">
      <img
        src="https://www.picsum.photos/400/300"
        alt="Placeholder"
        class="fluid-image"
      />
    </div>
  </div>
  <div class="standard-banner-text-container">
    <div class="standard-banner-text">
      <p class="standard-banner-eyebrow">optional eyebrow</p>
      <p class="standard-banner-heading">Heading</p>
      <p class="standard-banner-description">Description goes here.</p>
      <p class="standard-banner-price">$price</p>
      <p class="standard-banner-cta">
        <button class="textbutton textbutton-skin-primary">
          Textbutton CTA
        </button>
      </p>
    </div>
  </div>
</div>

You can set the text alignment to "right" to move the text to the right-hand side.

Placeholder

Heading

This banner has text on the right, so it shifts the image to the left.

$price

Share
Share
jsx
<div class="standard-banner standard-banner-text-align-right">etc</div>

Full-Width-Image

The "full-width-image" layout places the text over the image, which spans the full banner.

Placeholder

Heading

A banner with a full-width-image, text overlaid on top.

$price

Share
Share
jsx
<div class="standard-banner standard-banner-layout-full-width-image">etc</div>

Two-Images

The "two-images" layout places the text between two images, at least for desktop screens. (On smaller screens, the banner will take on a vertical orientation, and the left-hand image will be suppressed.)

Placeholder
Placeholder

Heading

A banner with two images, a regular image and a secondary image. The secondary image is shown at left, and is hidden on smaller screens.

$price

Share
Share
jsx
<div class="standard-banner standard-banner-layout-two-images">
  <div class="standard-banner-image-container">
    <div class="standard-banner-image">
      <img
        src="https://www.picsum.photos/400/300"
        alt="Placeholder"
        class="fluid-image"
      />
    </div>
  </div>
  <div class="standard-banner-secondary-image-container">
    <div class="standard-banner-secondary-image">
      <img
        src="https://www.picsum.photos/399/301"
        alt="Placeholder"
        class="fluid-image"
      />
    </div>
  </div>
  <div class="standard-banner-text-container">
    <div class="standard-banner-text">
      <p class="standard-banner-heading">Heading</p>
      <p class="standard-banner-description">
        A banner with two images, a regular image and a secondary image. The
        secondary image is shown at <em>left</em>, and is hidden on smaller
        screens.
      </p>
      <p class="standard-banner-price">$price</p>
      <p class="standard-banner-cta">
        <button class="textbutton textbutton-skin-primary">
          Textbutton CTA
        </button>
      </p>
    </div>
  </div>
</div>

Side-by-Side

The "side-by-side" layout is used for two Standard Banners that sit beside one another, inside a StandardBannerSideBySideSet wrapper component.

Placeholder

Heading

Description goes here.

Placeholder

Bottom Right

Description goes here.


Placeholder

Top Left

Description goes here.

Placeholder

Top Right

Description goes here.

Share
Share
jsx
<div class="standard-banner-side-by-side-set">
  <div class="standard-banner standard-banner-layout-side-by-side">etc</div>


  <div
    class="
      standard-banner
      standard-banner-layout-side-by-side
      standard-banner-text-align-right
    "
  >
    etc
  </div>
</div>


<div class="standard-banner-side-by-side-set">
  <div
    class="
      standard-banner
      standard-banner-layout-side-by-side
      standard-banner-text-vertical-align-top
    "
  >
    etc
  </div>


  <div
    class="
      background-opal
      standard-banner
      standard-banner-layout-side-by-side
      standard-banner-text-vertical-align-top
      standard-banner-text-align-right
    "
  >
    etc
  </div>
</div>