Hero / Slideshow

The Hero element can be used to make content stand out. It is usually placed as the first block and always contains media. The media can be an image, a video or a map. The Hero element can be a single item or a slideshow. In case of a slideshow we use the FlexSlider module.

  <div class='block hero'>
    <img src="/photos/group_public_large.jpg" alt="description of the image" />
      <span> Example with an image </span>


Example with an image


If you want to show multiple items in a hero block, you can use the FlexSlider module. The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider hero”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.