Hero Sections

Hero Sections Updated

IMPORTANT: If you are using a ThememMountain HTML product other than Marquez v.1.0.5, Sartre v.1.0.2 or later, Warhol, Kant or Basho, check this page for the old hero 5 and 7 sections. This page will be available until all templates have been upated using the latest verison of the framework.

A hero section is a great way to draw attention to key information, an image or a product. Each of our templates come with six predesigned hero section that are defined by the class .hero-X, where X represents the hero section type (1-7).

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.

								
									.hero-X{
										background-image:url(../images/slider/hero-image.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.hero-X{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							

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
								
									
A SIMPLE HERO SECTION

Hero Section 1

Hero ...


Hero Section Two

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

hero example 2
Example
								
									
A HERO SECTION WITH BACKGROUND IMAGE

Hero Section 2

Hero ...


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
								
									
A SMALL DESCRIPTIVE HERO SECTION

Hero Section 3

Hero ...


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
								
									
A HERO SECTION WITH OVERLAY

Hero Section 4

Hero ...

Right Aligned

Add the .right class to the hero wrapper to position the overlay right and the .offset-6 class to the column wrapper to position the content right.

hero example 4 right
Example
								
									
A HERO SECTION WITH OVERLAY

Hero Section 4

Hero ...

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
								
									
A HERO SECTION WITH OVERLAY

Hero Section 4

Hero ...


Hero Section Five Updated

Hero section five and seven have now been integrated into one split hero section. It has been greatly simplfied and no longer uses the pseudo element :before for setting the hero image. Instead, the hero image is set directly on an empty div given the class .media-column. As the media column now makes up a part of the markup, its width can be altered directly using the framework .width-x classes. It can also be animated using Horizon.

Left Aligned

By default the hero image appears to the left, which means that we need to add the class .offset-7 to the hero content column wrapper to position the content to the right.

hero example 5
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...

Right Aligned

Add the .right class to the hero wrapper to position the media column to the right and the remove the .offset-6 class from the column wrapper to position the content left. By default, the hero content will be right aligned when we add the .right class to the hero wrapper. To force the hero content to be left aligned, we add the .left class to the .hero-content-inner wrapper. More on text alignment classes can be found in the Helper Classes section of the Framework Documentation.

hero example right
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...

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 media column by adding/removing the .right class from the hero wrapper.

hero example 5 two columns
Example
								
									
A HERO SECTION WITH OVERLAY

Hero Section 4

Hero ...

40/60 Split

Given the new structure of hero section five we can alternate the width of the media column and therefore the width of the hero content to get more interesting layouts. Below is an example of a 40/60 split, where the media column is given the class .width-5 and the hero content the classes .width-6.offset-6

hero example right
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...

30/70 Split

For a 30/70 split, the media column is given the class .width-4 and the hero content the classes .width-7.offset-5

hero example right
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...

Media Column Video

We can now add a video directly to the media column. By the default the video will take up the full width and height of the media column.

hero example right
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...

Media Column Google Map

We can now add a Google Map directly to the media column as well. By the default the map will take up the full width and height of the media column. More on map settings found in the Google Map Sections.

hero example right
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...

Media Column Animation

Given the new structure we can also animate the media column upon entering the viewport using Horizon. More on map animation settings in the Horizon Reveal section of the Framework Documentation.

Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...

Mobile Appearance

By the default the media column is hidden on mobile, but we can force it to appear by adding the class .show-media-column-on-mobile to the hero wrapper, which will force the hero image to position itself above the hero content for screen widths ≤ 768px.

hero example right
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...


Full Width Split Hero Slider Updated

The hero slider has been reworked to mimic the logic our hero-5 section. As with the hero-5 section we now use an empty media column div for the slider image. We use two new slider attributes to set the slider image as a background image of this wrapper, namley data-as-bkg-image and data-image-wrapper for which we specify the image wrapper the slider should add the background image to. This allows us to variate the column width of both the media column and the content column, creating an even or uneven split hero section effect.

Other important aspects of the hero slider:

  • We prevent caption animation and scaling by adding the class no-transition and data-no-scale to the caption wrapper
  • Any caption content needs to be contained in a wrapper given the class tms-content-scalable. This class indicates to the script to scale the slider according to the content height.
  • Slider pagination is by default white. We can alternate to dark pagination depending on the background by adding the attribute data-nav-dark to the slide.

Note: For information on adding slides and creating captions please see: Avalanche Slider.

hero example 6
Example
								
									
  • SPLIT HERO SECTION

    Hero Section 6

    Hero ...

  • SPLIT HERO SECTION

    Hero Section 6

    Hero ...


Split Hero Slider New

There might be occasions when we do not want to shift the content, only the images. With the new structure we can add a content slider to the media-column while maintaining the split hero content. As opposed to the full width split hero slider, we do not need to specify the image wrapper

In the example below we have used the following slider attributes to create an autoadvancing slideshow:

  • data-auto-advance
  • data-auto-advance-interval="4000"
  • data-nav-arrows="false"
  • data-progress-bar="false"

Note: For information on adding slides and creating captions please see: Avalanche Slider.

hero example 6
Example
								
									
SPLIT HERO SECTION

Hero Section 5

Hero ...


Hero Overlay New

We can now add an overlay on the fly to hero sections 1 through 5. This is a great way to switch the color of the hero section image without having to resort to CSS. Overlay background color can be set directly using one of the Timber Framework background color classes. Opacity can be set using the new opacity classes .opacity-XX (ranging from 01-1).

hero overlay example
Example Hero 1-4
								
									
...
Example Hero 5
								
									
...