The page content of a full-width page is composed of stripe sections.
- On any page, the last stripe sectioninside
#page-contentshould have additional.stripe-bottomclass. - Any section with dark colored backgroundshould be used with additional
.dark-colored-bgclass.
The Benchmark template has various typesof stripe sections with different backgrounds.
Transparent Background
White Background: Full-width
White Background: Left-aligned
White Background: Right-aligned
White Background: Box (centered)
Light Grey Background
Primary Color Light Background
Primary Color Light Background:
Left-aligned
Primary Color Background
with smaller top and bottom paddings (optional "stripe-narrow" class)
Primary Color Dark Background
with default background pattern
Secondary Color Background
White Background: Left-aligned
+ colored background in the right column
White Background: Left-aligned
+ colored background in the right column
White Background: Left-aligned
+ colored background in the right column
White Background: Left-aligned
+ colored background in the right column
Custom Full-width Image
(in the stripe below)
Custom Background Image
with optional transparent upper layer
Custom Background Image
with optional transparent upper layer
+ fixed background
Full-width image
in stripe's left column
with secondary color background
Can be used with the following solid backgrounds: secondary color, primary color light, light grey.
Recommended parameters for the image:
- image ratio— 4/3
- minimum width— 1000px
Transparent Background
with geometric background (circles) at the left or right side of stripe
The best way of usage:
- on round imageor PNG/SVG image/icon with transparent background,
- in a stripe with transparent, white, light grey, or primary color lightbackground.
Full-width colored background in split columns
Learn moreBackground color options:
"primary color dark" (with optional "default background pattern") or "secondary color"
Learn more