Hero by SE 

With Hero, you can configure a larger-sized banner to display an image (with shapes behind it if wanted), general text, a title, and three call-to-actions. This is a great way to inform users why they may be on a certain page and provide them with important links within a space. This is helpful if you have a landing page and need to provide users with a blurb on why they are in a certain space as well as the quick links they would most likely need in that space. 

Key Features: 

  • Can display up to three different calls-to-actions 
  • Can display general text in addition to calls-to-action buttons 
  • Images and shapes can be either bubble or square-shaped
  • Can use any hex colors
Hero w/ Squares

This is a configuration showing how you can choose to have squares behind your image; they are configurable to be whatever color you would like. 

Hero w/ Circles

Instead of having squares there is a configuration option to have circles behind the image; just as the squares the circles are configurable to any color you would like. 

Hero w/ Two Call-to-Actions

This shows an example with two call-to-actions instead of one.

Hero w/ One Call-to-Action

This shows an example with two call-to-actions instead of one.

Hero w/ No Call-to-Actions & No Shape Roundness

This shows an example of a configuration with no call-to-actions and the shape roundness is configured to none. 

Hero w/ Small Shape Roundness & Small Image Roundness

This shows an example of a configuration with small shape roundness. 

Hero w/ Medium Shape Roundness and Medium Image Roundness

This show an example of a configuration with medium shape roundness. 

Hero w/ Large Shape Roundness & Large Image Roundness

This shows an example of a configuration with large shape roundness and large image roundness.