Team Sections

Team Sections

A team section is a great way to show the members that make up your team. Each of our templates come with four predesigned team sections that are defined by the class .team-X, where X represents the team section type (1-4) as shown below. Alternate the number of team members per row by changing the .content-grid-X class, where X represents the number of columns (2-6).

Example
								
									
...
CSS For Retina Displays

For team 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 team section for exact CSS targeting.

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

Team Section One

A basic team section grid. Target .team-1 to set background color or image. Alternatively, for background use Timber background color classes.

team example 1
Example
								
									

The Creative Team

John Doe
Designer

Team member info...

John Doe
Designer

Team member info...

John Doe
Designer

Team member info...


Team Section Two

A basic team secton grid with boxed team info. Target the .team-2 class to set background color or image. Alternatively, for background use Timber background color classes.

team example 2
Example
								
									

The Creative Team


Team Section Three

Team section with slider. Note: We are using the Avalanche Slider as our basis for the team slider, for more information on slider parameters please see Avalanche Slider of the Framework Docs.

To change background image or color, target .team-3 wrapper.

team example 3
Example
								
									

The Creative Team


Team Section Four

Creative team section with elegant rollover. To change background image or color, target .team-4 wrapper.

team example 4
Example
								
									

The Creative Team

Content
Content
Content