The page content of a full-width page is composed of stripe sections.

  • On any page, the last stripe section inside #page-content should have additional .stripe-bottom class.
  • Any section with dark colored background should be used with additional .dark-colored-bg class.

The Annuity template has various types of stripe sections with different backgrounds.

Light Grey Solid Background

Transparent Background

Pale Solid Background

with smaller top and bottom paddings (optional "stripe-narrow" class)

White Background

Primary Color Solid Background

Secondary Color Solid Background

Pale Solid Background

with light bars at the bottom of stripe

Light Grey Solid Background

with dark bars at the bottom of stripe

Default Background Image

different for each color scheme

Custom Background Image

with transparent (primary color) upper layer + diagonal lines

Custom Background Image

with gradient upper layer

graphs

Pattern Image Background — Light Grey

Here is the example of preferable usage:

  • left column — image (PNG with transparent background)
  • right column — text

Pattern Image Background — Dark Colored

in the demo mostly used for the bottom stripe

Light Grey Solid Background

with wordgram background image at the top of stripe

Dark Colored Gradient Background

with diagonal pinstripe

Light Grey Solid Background

with wordgram background image on the left side + V-shaped notch at the top of stripe

about us

Full-width image in stripe's left column

with secondary color background

Can be used with the following solid backgrounds: secondary color, light grey, pale.

Recommended parameters for the image:

  • image ratio — 4/3 (more text), 3/2 (less text)
  • minimum width — 1000px

Full-width Grey Background

in the left or right column of stripe section

+ Solid Background

Can be used with primary color or secondary color solid backgrounds.