Case Study: Flexible Funnel

1000 Leads
100 Appt.
10% of Leads
10 Offers
10% of Appts.
1 Deal
10% of Offers

Project Requirements

A recent project required the design of a visual sales funnel. The requirements were as follows:

  • No Images
  • 100% SASS
  • Completely Configurable
  • Mobile Responsive

No Images - 100% SASS

The funnel uses no images of any kind. Go ahead and inspect the code. It's image free. The entire funnel is constructed of HTML and SASS.

Completely Configurable

Through the use of SASS, the following items can be altered by changing a variable in the SASS or adding a class to the HTML. You do not have to dig deep into the code to customize the funnel.

  • Set the number of funnel sections (between 1 and 6).
  • Set the Color of the funnel sections.
  • Set the lighting intensity on the funnel sections.
  • Set the lighting angle on the funnel sections.
  • Set the intensity and angle of the text shadows.

Mobile Responsive

The funnel will work with CSS Grid or any grid frame work. Like all good components, its width will expand to fill it’s containing grid. It's mobile responsive out of the box.

Flexible Funnel is a highly configurable, responsive and reusable component.