Intel® Core™ Processors
Learn More about Intel

Process Flow Demo

Process Flow Webpart

A Process Flow can be set to either a vertical layout, horizontal staggered or horizontal aligned layout
  1. 01

    Step #1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.
  2. 02

    Step #2

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

    Step #3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.

Horizontal Staggered Process Flow Two Step Webpart

Show the steps horizontally to complete a task with step by step instructions. Horizontal process flows can have between two and four cards.
  1. 01

    Step #1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exert.
  2. 02

    Step #2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.

Horizontal Staggered Process Flow Webpart

Show the steps to complete a task with step by step instructions.
  1. 01

    Step #1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.
  2. 02

    Step #2

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

    Step #3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.

Horizontal Staggered Process Flow with Varied Content

The Description Title (as well as Description Text) is optional. Both the Subtitle and the Item Description Text support HTML Markup
  1. 1

    Step 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit: Join Dell Rewards for free. Double your rewards when you purchase with financing.*
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. 3

    Done

Horizontal Staggered Process Flow with no Step Labels

Step Labels are also optional. Here the flow line just flows straight through where a label would be.

  1. First Step

    Lorem ipsum dolor sit amet, consectetur adipiscing elit!

  2. Second Step

    Lorem ipsum dolor sit amet, consectetur adipiscing elit!

  3. Third Step

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor..

  4. Fourth Step

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exert.

Horizontal Aligned Process Flow Two Step Web part

Show the steps horizontally to complete a task with step by step instructions. Horizontal process flows can have between two and four cards.
  1. 01

    Step #1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exert.
  2. 02

    Step #2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.

Horizontal Aligned Process Flow with a Mix of Icons & Steps

Since all the fields are optional, the author can optionally supply what makes sense for their needs.
  1. A

    Step 1

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

  2. Step 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.
  3. B

    Final Step

    Lorem ipsum dolor sit amet!

Horizontal Aligned Process Flow with No Icons

Icons are optional. Note how the Title & Subtitle are also left-aligned here.
  1. A

    First Step

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. B

    Second Step

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u; Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  3. C

    Third Step

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
  4. D

    Fourth Step

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

Horizontal Aligned Process Flow Seven Step Webpart

Show the steps horizontally to complete a task with step by step instructions. Horizontal process flows can have between two and four cards, so when you have 5+ cards it automatically switches to a vertical layout.
  1. 01

    Step #1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.
  2. 02

    Step #2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  3. 03

    Step #3

    Lorem ipsum dolor sit amet.
  4. 04

    Step #4

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

    Step #5

    Lorem ipsum dolor sit amet, consectetur adipiscing elitSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  6. 06

    Step #6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariature.
  7. 07

    Step #7

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation upon.
Intel® Core™ Processors
Learn More about Intel