line_graphic_business_40

HORIZONTAL STEPS

SHOW PROCESSES WITH HORIZONTAL STEPS

Horizontal Steps Features:

  • Define minimum width for step items
  • Overall width of all steps defined by column width
  • Use font icon or icon image for each step
  • Add viewport animation to each step
  • Add different CSS3 hover animation to icon for each step
  • Define default and hover color for icon and background for each step
  • Define title and text color for each step individually
  • Add link to another site with optional link button
  • Element fully responsive and will “break out” into additional lines/rows if necessary (based on column width and minimum step width)
  • Option to switch to RTL layout/direction
Export Page Content

STEPS EXAMPLES

SHOW PROCESSES WITH HORIZONTAL STEPS

  • Getting the Green Light ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Starting the Setup ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Moving Forward ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Re-Evaluationg Goals ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Crossing the Finish Line ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Getting the Green Light ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Starting the Setup ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Moving Forward ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Re-Evaluationg Goals ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.
  • Crossing the Finish Line ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel auctor elit. Quisque scelerisque mattis magna, ut tincidunt lorem molestie at.