Feature Sections

Showcasing a Feature

A feature section is an elegant way to show a particular feature or product. Each of our templates come with three predesigned feature sections that are defined by the class .feature-X, where X represents the feature section type (1-3) as shown below.

Example
								
									
...
CSS For Retina Displays

For feature sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.

								
									.feature-X{
										background-image:url(../images/slider/feature-bkg-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) { 
											.feature-X{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							

Feature Section One

An elegant featured section with bottom center aligned image. Target .feature-1 to set background color or image. Alternatively, for background use Timber background color classes.

feature example 1
Example
								
									
CENTERED FEATURE SECTION

Feature Section 1

Content..


Feature Section Two

An elegant left or right aligned feature section. Target the .feature-2 class to set background color or image. Alternatively, for background use Timber background color classes. This feature section also employs the equalize plugin for matching columns heights so that the feature description is always perfectly vertically aligned in the middle. Simply add the .equalize class to the row wrapper.

Left Aligned Content
feature example 2
Example
								
									
CENTERED FEATURE SECTION

Feature Section 2

Content..

Right Aligned Content

Note: To right align text we add the .right class to the feature-2 wrapper.

feature example 2
Example
								
									
CENTERED FEATURE SECTION

Feature Section 2

Content..


Feature Section Three

A three column feature section. Target the .feature-3 class to set background color or image. Alternatively, for background use Timber background color classes. As with feature section 2, this section also employs the equalize plugin for matching columns heights so that the feature description is always perfectly vertically aligned in the middle. Simply add the .equalize class to the row wrapper.

feature example 3
Example
								
									

Feature Section 3

...
...