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 updated using the latest version 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 purpose-built 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.
Example
A SIMPLE HERO SECTION
Hero Section 1
Hero ...
Hero Section Two
Hero section with background image. Target the .hero-2 class to set background image.
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.
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
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.
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.
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 simplified 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.
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.
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.
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
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
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.
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.
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.
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, namely 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.
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 auto advancing slide show:
- 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.
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).
Example Hero 1-4
...
Example Hero 5
...