Here you’ll find all of the designer styled page elements to use for new page builds and page expansions. Below, you’ll find an example of each styled stripe, along with how certain page elements display within them.

Further down, you’ll find sample page elements, explanations of their function, recommended usage, and where to edit them.

Default Stripe

This is what the default stripe will look like. Use the Row preset Default Stripe or set the stripe to Default in the row settings.

This is an example of a default link. This is an example of a gps-link.

This is text with a gps-color1 class.

This is text with a gps-color2 class.

This is text with a gps-color3 class.

This is text with a gps-subtle class.

This is text with a gps-font1 class.

This is text with a gps-font2 class.

This is text with a gps-font3 class.

  1. This is a list item
    1. Subitem 1
    2. Subitem 2
  2. This is also a list item
  3. This is a list item with a gps-link

This is a default Pull Quote. Use it well!

This is a default blockquote. Use it well!

This is a quote with a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis facilisis mauris, at tincidunt quam ullamcorper id

Source

This is a gps-image class example

This is a gps-coupon div example

  50% off!

Stripe 1

This is what stripe 1 will look like. Use the Row preset Default Stripe or set the stripe to Default in the row settings.

This is an example of a default link. This is an example of a gps-link.

This is text with a gps-color1 class.

This is text with a gps-color2 class.

This is text with a gps-color3 class.

This is text with a gps-subtle class.

This is text with a gps-font1 class.

This is text with a gps-font2 class.

This is text with a gps-font3 class.

  1. This is a list item
    1. Subitem 1
    2. Subitem 2
  2. This is also a list item
  3. This is a list item with a gps-link

This is a default Pull Quote. Use it well!

This is a default blockquote. Use it well!

This is a quote with a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis facilisis mauris, at tincidunt quam ullamcorper id
Source

This is a gps-image class example

This is a gps-coupon div example

  50% off!

Stripe 2

This is what stripe 2 will look like. Use the Row preset Default Stripe or set the stripe to Default in the row settings.

This is an example of a default link. This is an example of a gps-link.

This is text with a gps-color1 class.

This is text with a gps-color2 class.

This is text with a gps-color3 class.

This is text with a gps-subtle class.

This is text with a gps-font1 class.

This is text with a gps-font2 class.

This is text with a gps-font3 class.

  1. This is a list item
    1. Subitem 1
    2. Subitem 2
  2. This is also a list item
  3. This is a list item with a gps-link

This is a default Pull Quote. Use it well!

This is a default blockquote. Use it well!

This is a quote with a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis facilisis mauris, at tincidunt quam ullamcorper id
Source

This is a gps-image class example

This is a gps-coupon div example

  50% off!

Stripe 3

This is what stripe 3 will look like. Use the Row preset Default Stripe or set the stripe to Default in the row settings.

This is an example of a default link. This is an example of a gps-link.

This is text with a gps-color1 class.

This is text with a gps-color2 class.

This is text with a gps-color3 class.

This is text with a gps-subtle class.

This is text with a gps-font1 class.

This is text with a gps-font2 class.

This is text with a gps-font3 class.

  1. This is a list item
    1. Subitem 1
    2. Subitem 2
  2. This is also a list item
  3. This is a list item with a gps-link

This is a default Pull Quote. Use it well!

This is a default blockquote. Use it well!

This is a quote with a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis facilisis mauris, at tincidunt quam ullamcorper id
Source

This is a gps-image class example

This is a gps-coupon div example

  50% off!

Stripe 4 (Dark BG Light Text)

This is what stripe 4 will look like. Use the Row preset Default Stripe or set the stripe to Default in the row settings.

This is an example of a default link. This is an example of a gps-link.

This is text with a gps-color1 class.

This is text with a gps-color2 class.

This is text with a gps-color3 class.

This is text with a gps-subtle class.

This is text with a gps-font1 class.

This is text with a gps-font2 class.

This is text with a gps-font3 class.

  1. This is a list item
    1. Subitem 1
    2. Subitem 2
  2. This is also a list item
  3. This is a list item with a gps-link

This is a default Pull Quote. Use it well!

This is a default blockquote. Use it well!

This is a quote with a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis facilisis mauris, at tincidunt quam ullamcorper id
Source

This is a gps-image class example

This is a gps-coupon div example

  50% off!

Stripe 5 Light BG Dark Text)

This is what stripe 5 will look like. Use the Row preset Default Stripe or set the stripe to Default in the row settings.

This is an example of a default link. This is an example of a gps-link.

This is text with a gps-color1 class.

This is text with a gps-color2 class.

This is text with a gps-color3 class.

This is text with a gps-subtle class.

This is text with a gps-font1 class.

This is text with a gps-font2 class.

This is text with a gps-font3 class.

  1. This is a list item
    1. Subitem 1
    2. Subitem 2
  2. This is also a list item
  3. This is a list item with a gps-link

This is a default Pull Quote. Use it well!

This is a default blockquote. Use it well!

This is a quote with a source. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis facilisis mauris, at tincidunt quam ullamcorper id
Source

This is a gps-image class example

This is a gps-coupon div example

  50% off!

Other Sample Elements

Headers

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Header Size

h1-size

h2-size

h3-size

h4-size

h5-size

h6-size

Custom List Row

Use class=”gps-list-row” on a row containing gps-lists split across multiple columns in order to make them appear as a single list on mobile. Use only for unordered lists.

Custom List Row styling can be edited in the Custom Lists section of the Custom CSS file located under Theme Options > General > Custom CSS.

  • This is a list item
  • This is also a list item
  • This is yet another list item
  • This is a list item
  • This is also a list item
  • This is yet another list item

Gravity Form

CTA Stripe

This is what a CTA Stripe will look like. Use the Row preset CTA Stripe or set the stripe to Stripe 1 with a negative bottom margin in the row settings.