WIREFRAME STARTER PAGE

This is the Hero Row

This column has a CSS class selector of hero-column-one.

?text=[ PLACEHOLDER ]

Content Row First

?text=[ PLACEHOLDER ]

Content Column First

The images on this wireframe page are added via URL from placeholder.com. The one in this row left looks like this:

https://via.placeholder.com/500x.500gif/000/fff/?text=[ PLACEHOLDER ]

500x.500gif sets the size and image type. 000/fff sets the colour and ?text= is where you add text. The great thing is you can change these in the page builder and get a live preview.

Benefit Row

?text=300 x 180

Benefit Column

This uses CSS to bottom align modules (buttons) regardless of content.

?text=300 x 180

Benefit Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet consectetur.

?text=300 x 180

Benefit Column

The Box shadow here is added to the Layout CSS.

?text=500 x 500

Content Column Second

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet consectetur adipiscing elit ut aliquam purus sit. Neque egestas congue quisque egestas. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Molestie nunc non blandit massa enim. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum.

Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Augue neque gravida in fermentum et sollicitudin ac. Consectetur libero id faucibus nisl tincidunt. Sapien eget mi proin sed libero enim sed faucibus. Elementum integer enim neque volutpat ac tincidunt.

Format for custom selectors:
.header-row
.header-column-one  | .header column-two  etc.

If both columns are styled the same use .header-column for both.

Most rows are only needed once on a page:
.hero-row  | .benefit-row |. feature-row | .testimonial-row  etc.

EXCEPT content rows which are named as:

.content-row-first |  .content-row-second etc.
The columns for each are named:
.content-column-first-one | .content-column-first-two|

There's no plurals in the naming convention.

?text=500 x 500

Feature Row

Feature Column


?text=240 x 80
  • Nulla facilisi
  • iaculis urna
  • Molestie nunc
  • fermentum

Feature Column


?text=240 x 80
  • Nulla facilisi
  • iaculis urna
  • Molestie nunc
  • fermentum

Feature Column


?text=240 x 80
  • Nulla facilisi
  • iaculis urna
  • Molestie nunc
  • fermentum

Feature Column


?text=240 x 80
  • Nulla facilisi
  • iaculis urna
  • Molestie nunc
  • fermentum

Testimonial Row

?text=^_^

Testimonial Column… lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore.

Pete Smith - Tech Wizard


?text=._.

Testimonial Column… lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore.

Pete Smith - Tech Wizard


?text=^_^

Testimonial Column… lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore.

Nancy Jones - Vet


Social Proof Row

Companies we work with / publications that have featured us.

?text=*****
?text=___
?text=*****
?text=___
?text=*****

Call to Action Row

CTA Column

Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Augue neque gravida in fermentum et sollicitudin ac.

Amet porttitor eget dolor morbi. Quis commodo odio aenean sed adipiscing diam.

Get exclusive offers and information on upcoming events.

Contact Row

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CALL US
01234 -567-890
0800 -567-890

VISIT US
1a Acacia Avenue
London, NW1 1AZ