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 purpose-built 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/team-i[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.
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 section grid with boxed team info. Target the .team-2 class to set background color or image. Alternatively, for background use Timber background color classes.
Example
The Creative Team
John Doe
Designer
Team member info...
John Doe
Designer
Team member info...
John Doe
Designer
Team member info...
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.
Example
The Creative Team
-
John Doe
Designer
Team member info...
-
John Doe
Designer
Team member info...
-
John Doe
Designer
Team member info...
Team Section Four
Creative team section with elegant rollover. To change background image or color, target .team-4 wrapper.
Example
The Creative Team
John Doe
Designer
John Doe
Designer
John Doe
Designer