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.

hero example 1
Example
								
									

Hero Section Two

Hero section with background image. Target the .hero-2 class to set background image.

hero example 2
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.

hero example 3
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
hero example 4
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.

hero example 4 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.

hero example 4 two columns
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
hero example 5
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.

hero example 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.

hero example 5 two columns
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.

hero example 6
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
hero example 7 video
Example
								
									
Right Aligned Content
hero example 7 video right
Example
								
									
Google Map
hero example 7 map
Example