Hero Sections
Hero Sections
A hero section is a great way to draw attention to key information, an image or a product. Each of our templates come with seven purpose-built hero section that are defined by the class .hero-X, where X represents the hero section type (1-6).
Example
CSS For Retina Displays
For retina displays we serve a higher resolution hero image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual hero section for exact CSS targeting.
Basic Hero Examples
Hero Section One
A simple hero section with background color. Target the .hero-1 class to set background color.
Example
Hero Section Two
Hero section with background image. Target the .hero-2 class to set background image.
Example
Hero Section Three
A hero section with movable content section. Target the .hero-3 class to set background image.
Add the .top, .right, .bottom, .left and .center classes to the hero wrapper for positioning the hero content area. Alternate the content area width by variating the column width.
Example
Split Hero Examples
Hero Section Four
A split hero section with full width background image. This hero section can use either one or two columns for content. Note: The hero overlay will span 50% of window width, always making sure that it will span from one edge of the device window to the center of the hero section. The hero content, however, will always be centered and will not span beyond the 1140px grid width. We have built it this way so that split hero content is always properly aligned with other content that appears in the page.
Target the .hero-4 class to set background image.
Left Aligned
Example
Right Aligned
Add the .right class to the hero wrapper to position the overlay right and the .push-6 class to the column wrapper to position the content right.
Example
Two Column Content
For a two column content split hero section we simply add another column as shown below. We can still alternate the position of the overlay by adding/removing the .right class.
Example
Hero Section Five
As with hero section four, this can use either one or two columns for content, but the image/s will only span half the device window width, therefore showing more of the image. Note: As with hero section four, each background element of the hero section will span 50% of window width, always making sure that it will span from one edge of the device window to the center of the hero section. The hero content, however, will always be centered and will not span beyond the 1140px grid width.
Unlike the above hero sections, hero section five uses pseudo selectors such as :before and :after for setting background color and background image. To set background color (unless a background color class is used) we target. .hero-5 > .row:before To set background image we target .hero-5 > .row:after.
Left Aligned
Example
Right Aligned
Add the .right class to the hero wrapper to position the content wrapper right and the .push-6 class to the column wrapper to position the content right.
Two Column Content
For a two column content split hero section we simply add another column as shown below. We can still alternate the position of the colored background by adding/removing the .right class.
Example
Hero Section Six
Hero section six is a full width hero section slider that can display images and background videos. Note: As we are using the Avalanche Slider as our basis for the hero slider, we add the .no-transition class to the .tms-caption caption wrapper to prevent the slider from animating the hero content.
Note: For information on adding slides and creating captions please see: Avalanche Slider.
Example
Hero Section Seven
Hero section seven is a split full width hero section that can showcase a video or a map.
Hero section seven uses pseudo selectors such as :before and :after for setting background image. For background image or background color target the .hero-7 > .row:before .hero-7 > .row:after respectively.
Left Aligned Content
Example
Right Aligned Content
Example
Google Map
Example