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.
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- This is a list item with a link
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- 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 social quote.
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.
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- This is a list item with a link
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- 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 social quote.
—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.
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- This is a list item with a link
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- 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 social quote.
—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.
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- This is a list item with a link
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- 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 social quote.
—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.
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- This is a list item with a link
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- 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 social quote.
—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.
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- This is a list item with a link
- This is a list item
- Subitem 1
- Subitem 2
- This is also a list item
- 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 social quote.
—Source
This is a gps-image class example
This is a gps-coupon div example
50% off!
Other Sample Elements
Review Buttons
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.