Skip to main content

Banner Card

Available on
Faculty Sites

Banner Cards are an easy and attractive way to feature a large image with the option to add a short caption and linked button. This tutorial will cover how to add Banner Cards, a type of block.

Add a Banner Card

Faculty Homepage Builder

To add any type of block, click the blue Add Block button in the Homepage Builder. It is best to put Banner Cards in the wide single column regions located at the top and bottom of the layout.

The big blue Add Block button

The menu will slide out from the right, and you can click Create Custom Block, then Banner Card.

Edit a Banner Card

Faculty Homepage Builder and Sites+ Homepage Editor

There are several fields in the configure pop-up for the Banner Card.

Title. A title is required, but you may uncheck Display title to hide it.

The display title checkbox is below the title field.

Image. A large banner image is required. Use a wide horizontal image. Recommended image dimensions are 2000 x 800 pixels. Images that are not exactly these dimensions will be resized automatically. Be sure to fill out the alternate text to succinctly describe the image to screenreaders.

Caption. This text will be displayed in a colored box on top of the image. We recommend you keep it brief.

Button. Add a button to the caption area. You can link to an outside website or use the autocomplete to link to a page on your website.

Button icon. There are several icons (small pictures) to choose from. The icon will appear to the left of the button text.

Caption position. Choose where the caption is located on top of the banner. Choose a caption position that works best with your banner image.

  • Top right
  • Top left
  • Center
  • Bottom right
  • Bottom left

Collage of six images showing each of the caption positions.

Caption style. Choose a caption design.

  • Red
  • Dark
  • Light

Examples of each of the three banner styles

Add or Save

Be sure to click Save or Add Block.