UltraKit · Widget #71

Process / Steps Flow

5 Layouts × 5 Marker Shapes × 6 Connector Styles × Progress States (done / current / upcoming) × 4 Reveal Animations × 4 Card Styles

6 Connector Line5 Layout5 Marker Shape4 Reveal Animation on Scroll4 Step Card Style2 More Choices2 Toggles

Section 01

Connector Line

6 options for connector line — all shown live below.

1

Solidconnector = solid

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

2

Dashedconnector = dashed

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

3

Dottedconnector = dotted

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

4

Gradientconnector = gradient

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

5

Arrowconnector = arrow

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

6

Noneconnector = none

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

Section 02

Layout

5 options for layout — all shown live below.

1

Horizontallayout = horizontal

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

2

Verticallayout = vertical

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

3

Zig-zag (alternating)layout = zigzag

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

4

Card Grid with Arrowslayout = cards

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

5

Staircaselayout = stairs

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

Section 03

Marker Shape

5 options for marker shape — all shown live below.

1

Circlemarker_shape = circle

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

2

Rounded Squaremarker_shape = rounded

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

3

Hexagonmarker_shape = hexagon

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

4

Diamondmarker_shape = diamond

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

5

Outlined Ringmarker_shape = ring

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

Section 04

Reveal Animation on Scroll

4 options for reveal animation on scroll — all shown live below.

1

Nonereveal = none

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

2

Fade Upreveal = fade-up

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

3

Zoom Inreveal = zoom

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

4

Slide Inreveal = slide

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

Section 05

Step Card Style

4 options for step card style — all shown live below.

1

None (open)card = none

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

2

White Cardcard = card

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

3

Outlinedcard = outline

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

4

Soft Tintedcard = tinted

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

Section 06

More Choices

Extra switches for the finishing touches.

1

Marker Shows: Step numbermarker_content = number

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

2

Marker Shows: Icon (falls back to number)marker_content = icon

1. Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. Design

   Wireframes and polished visuals that you review and approve.

4. Build

   Clean, fast, responsive development with regular progress updates.

5. Launch

   Testing, go-live and hand-over — plus support after release.

Section 07

Show & Hide Options

Switch parts of the widget on or off.

1

Checkmark on Completed Steps — Offdone_check = off

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.

2

Hide On Desktop — Onhide_desktop = hidden-desktop

1. 1

   Discovery

   We learn about your goals, audience and timeline in a free strategy call.

2. 2

   Planning

   A clear roadmap, scope and milestones — no surprises along the way.

3. 3

   Design

   Wireframes and polished visuals that you review and approve.

4. 4

   Build

   Clean, fast, responsive development with regular progress updates.

5. 5

   Launch

   Testing, go-live and hand-over — plus support after release.