What is the Hero Carousel?

The Hero Carousel provides a way to display up to five hero images on your Bento site. Hero image is a term used to describe a large banner image, containing imagery and text, that is placed prominently on a web page and is representative of the site's most popular content. On a desktop, users can scroll through each hero image by clicking left and right facing arrows that appear when the image is moused over, or by clicking the five small dots in the lower center of the image. On mobile devices, users can scroll through images by swiping the screen

 

Use this component on a Full Width layout only.

Element specifications

View the styleguide!

Element Specs Example (click images to enlarge)
Hero image 
  • Minimum size: 1440 pixels wide by 560 pixels high
  • Ratio: 18:7

 

Logo
  • Maximum size: 300 pixels wide by 100 pixels high
  • Color: Transparent PNG
Alternate title
  • Maximum 36 characters. Displayed on desktop if no Logo is used. Always displayed at mobile (<960) breakpoints)
Description
  • Maximum 104 characters
 
Call to Action
  • Maximum 24 characters.
 
Menu logo
  • Minimum size: 300 pixels wide by 100 pixels high
  • Color: White or grayscale
Background style

You have three choices:

  • Blur
  • Light
  • Dark

 

Blur:

Light:

Dark:

Presentation

Desktop Mobile 

 

Variables

VariableDefinition
Alternate TitleClickable text that appears only when users are viewing your hero carousel on a mobile device or in place of a logo when a hero logo is not included. The alternate title clicks through to the same link used by the logo and call to action fields. Maximum length: 36 characters, including spaces.
Call to ActionClickable text that should solicit an action from the user. For example, "Learn more," "Watch episode," or "View program schedule." Maximum length: 24 characters, including spaces.
DescriptionText that is unique to each hero image and should be descriptive of what the image represents. Maximum length: 104 characters, including spaces.
Hero ImageA carousel image that should have a minimum size of 1440 pixels wide by 560 pixels high with a ratio of 18:7. Hero images should be stored in your filer folders. You do not need to include all five images but you must include at least one. This is a required field.
LinkA URL that is unique to each carousel image and is associated with the logo, description, and call to action text. Maximum length: 100 characters, including spaces.
LogoThe logo displays on the left side of the hero image and clicks through to the same place as the Alternate Title and Call to Action fields.
Menu LogoAn image that appears when users are viewing your hero carousel on a mobile device. Appears in the top center of each hero carousel image and is not clickable.
Background styleAdds a filler around the hero image on screens that are larger than 1440. Choices are blue, light, and dark.

How to implement the Hero Carousel

 View the tutorial

 

Use this component on a Full Width layout only.

  • In a block of the content section of your website (i.e.: not the header or footer), click the plus sign to add a component (Figure 1.1) and click custom components (Figure 1.2).

Figure 1

  • Click the default component to bring up the list of available components (Figure 2).

Figure 2

  • Click the component dropdown menu and click Hero Carousel (Figure 3).

Figure 3

You must include at least one (1) image in your Hero carousel and can add up to five (5).

The following example displays only the fields for the first hero image and the menu logo. You can add up to a total of five hero images in your Hero Carousel.

  • In the Image section, click Choose to select the first hero image from your filer folders (Figure 4.1). (warning) You can include up to five hero images in this custom component. This field is mandatory.
  • In the Logo section, click Choose to select a logo from your filer folders (Figure 4.2). The logo appears in the lower left side of the image and should be representative of your program.
  • In the Alternate Title textbox, type the title of the page you want users to see when they are viewing your hero carousel on a mobile device (Figure 4.3). This title also shows up in place of a logo when the Logo is not included. (info) The alternate title clicks through to the same link used by the Logo and Call to Action fields.
  • In the Description textbox, type some text that is unique to each hero image and is descriptive of what the image represents (Figure 4.4). (info) This appears on the left side of the hero image.
  • In the Call to Action textbox, type some text that will entice users to click on the image and go to another page on your site (Figure 4.5). Examples include, "Learn more," "Watch episode," or "View program schedule." 
  • In the Link textbox, type the full URL of the page to which you want the individual carousel image to click through (Figure 4.6). (info) This is used by the Logo, Description, and Call to Action text fields.
  • If you want to delete one of your hero images and all its associated information, click Remove slide (Figure 4.7).
  • Click Add another slide to add your next hero image (Figure 4.8).
  • Click the Background Style dropdown menu to select a border for your image when viewed on screens larger than 1440 (Figure 5.9).
  • At any time you can click Submit to save the page (Figure 5.10). 

Figure 4

 Click here to view where each of these fields appear on your hero carousel

Click image to enlarge

 

  • Click Preview site in the upper right side of the screen to view this page in a browser (Figure 5).

Figure 5

  • Your hero carousel appears and users can use the five dots in the lower center of the image or the arrows on the left and right sides of the image (these only show when the user hovers their mouse over the image) to scroll through each image (Figure 6). 

Figure 6

How to rearrange hero items

  • You can click the upward-facing arrow to condense sections (Figure 1.1).
  • Click the patterned left edge and drag to rearrange the order of each section (Figure 1.2). Each section is automatically renumbered to reflect its new position.

Figure 1

click image to enlarge

How to delete items

  • If a section is condensed, click the downward facing arrow to expand the section that holds the slides you want to delete (Figure 1.2).

Figure 1

  • Click Remove Slide (Figure 2).

Figure 2

  • Click Confirm (Figure 3).

Figure 3

  • The slide has been deleted. You can add another by clicking Add another slide (Figure 4).

Figure 4

You must include at least one image...

...or you will encounter this message: