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" />
<p>
<span> Example with an image </span>
</p>
</div>
Example with an image
FlexSlider
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.
