BreezyBit
Book a Demo
Start Free Trial

Five-Step Page Progress Bar

Multi-Page Indicator

Shows form progress clearly across a 5-page flow.

For Use In: BreezyBit HTML Content element

Page 1

Page 2

Page 3

Page 4

Page 5

Page 1 of 5 
<div style="display:flex; justify-content:center; align-items:center; gap:10px; width:100%; max-width:100%; box-sizing:border-box; padding:0 8px; overflow:hidden;">
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
</div>
Page 2 of 5 
<div style="display:flex; justify-content:center; align-items:center; gap:10px; width:100%; max-width:100%; box-sizing:border-box; padding:0 8px; overflow:hidden;">
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
</div>
Page 3 of 5 
<div style="display:flex; justify-content:center; align-items:center; gap:10px; width:100%; max-width:100%; box-sizing:border-box; padding:0 8px; overflow:hidden;">
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
</div>
Page 4 of 5 
<div style="display:flex; justify-content:center; align-items:center; gap:10px; width:100%; max-width:100%; box-sizing:border-box; padding:0 8px; overflow:hidden;">
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#d8d8d8; border-radius:6px;"></div>
</div>
Page 5 of 5 
<div style="display:flex; justify-content:center; align-items:center; gap:10px; width:100%; max-width:100%; box-sizing:border-box; padding:0 8px; overflow:hidden;">
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
  <div style="flex:1 1 0; max-width:84px; min-width:0; height:20px; background:#e4a13a; border-radius:6px;"></div>
</div>
  • Use Page 1 snippet on the first form page, then increase highlighted bars each page.
  • Keep this bar at the top of every page to reduce drop-off in multi-step flows.
  • Color tokens: active `#e4a13a`, inactive `#d8d8d8`.

Start-to-Finish Progress Header

Linear Progress Banner

Shows a compact top progress strip with clear START and FINISH labels.

For Use In: BreezyBit HTML Content element

Page 1

STARTFINISH

Page 2

STARTFINISH

Page 3

STARTFINISH

Page 4

STARTFINISH

Page 5

STARTFINISH

Page 6

STARTFINISH

Page 7

STARTFINISH
Page 1 of 7 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0 0;">
  <div style="width:min(100%,560px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;">
      <span style="height:16px;border-radius:4px;background:#ff5a62;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">START</strong>
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">FINISH</strong>
    </div>
  </div>
</div>
Page 2 of 7 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0 0;">
  <div style="width:min(100%,560px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;">
      <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#ff5a62;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">START</strong>
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">FINISH</strong>
    </div>
  </div>
</div>
Page 3 of 7 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0 0;">
  <div style="width:min(100%,560px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;">
      <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#ff5a62;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">START</strong>
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">FINISH</strong>
    </div>
  </div>
</div>
Page 4 of 7 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0 0;">
  <div style="width:min(100%,560px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;">
      <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#ff5a62;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">START</strong>
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">FINISH</strong>
    </div>
  </div>
</div>
Page 5 of 7 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0 0;">
  <div style="width:min(100%,560px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;">
      <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#ff5a62;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">START</strong>
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">FINISH</strong>
    </div>
  </div>
</div>
Page 6 of 7 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0 0;">
  <div style="width:min(100%,560px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;">
      <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#ff5a62;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#d8d8d8;display:block;"></span>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">START</strong>
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">FINISH</strong>
    </div>
  </div>
</div>
Page 7 of 7 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0 0;">
  <div style="width:min(100%,560px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;">
      <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#bc3f45;display:block;"></span>
    <span style="height:16px;border-radius:4px;background:#ff5a62;display:block;"></span>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">START</strong>
      <strong style="font-size:clamp(12px,1.8vw,20px);line-height:1.1;color:#4b4b4b;letter-spacing:.2px;">FINISH</strong>
    </div>
  </div>
</div>
  • Use as a visual guide at the top of multi-page forms.
  • Colors: completed `#bc3f45`, current `#ff5a62`, upcoming `#d8d8d8`.
  • If text is too large for your form width, reduce the START/FINISH font size.

Three-Step Bubble Progress

Step Badges

Visual step indicator using numbered tiles with pointer markers.

For Use In: BreezyBit HTML Content element

Page 1

1
Step 1
2
Step 2
3
Step 3

Page 2

1
Step 1
2
Step 2
3
Step 3

Page 3

1
Step 1
2
Step 2
3
Step 3
Step 1 active (of 3) 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:6px 0;">
  <div style="display:flex;justify-content:center;align-items:start;gap:18px;flex-wrap:nowrap;">
    <div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#21b7bf;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    1
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #21b7bf;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#21b7bf;font-weight:700;">Step 1</strong>
</div>
<div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#a8c9cb;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    2
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #a8c9cb;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#9cb8ba;font-weight:700;">Step 2</strong>
</div>
<div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#a8c9cb;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    3
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #a8c9cb;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#9cb8ba;font-weight:700;">Step 3</strong>
</div>
  </div>
</div>
Step 2 active (of 3) 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:6px 0;">
  <div style="display:flex;justify-content:center;align-items:start;gap:18px;flex-wrap:nowrap;">
    <div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#21b7bf;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    1
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #21b7bf;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#21b7bf;font-weight:700;">Step 1</strong>
</div>
<div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#21b7bf;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    2
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #21b7bf;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#21b7bf;font-weight:700;">Step 2</strong>
</div>
<div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#a8c9cb;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    3
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #a8c9cb;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#9cb8ba;font-weight:700;">Step 3</strong>
</div>
  </div>
</div>
Step 3 active (of 3) 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:6px 0;">
  <div style="display:flex;justify-content:center;align-items:start;gap:18px;flex-wrap:nowrap;">
    <div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#21b7bf;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    1
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #21b7bf;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#21b7bf;font-weight:700;">Step 1</strong>
</div>
<div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#21b7bf;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    2
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #21b7bf;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#21b7bf;font-weight:700;">Step 2</strong>
</div>
<div style="display:grid;justify-items:center;gap:8px;min-width:70px;">
  <div style="position:relative;background:#21b7bf;color:#fff;font-size:40px;line-height:1;font-weight:700;border-radius:10px;padding:8px 0;width:72px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.12);">
    3
    <span style="position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #21b7bf;"></span>
  </div>
  <strong style="font-size:16px;line-height:1;color:#21b7bf;font-weight:700;">Step 3</strong>
</div>
  </div>
</div>
  • Use one snippet per page so the active teal steps progress from 1 to 3.
  • Keep the component centered and near the top for orientation.
  • Colors: active `#21b7bf`, upcoming `#a8c9cb`.

Three-Step Line Progress

Connected Stepper

Shows steps connected on a single horizontal line with active progress fill.

For Use In: BreezyBit HTML Content element

Page 1

Overall satisfactionPricingContacts
123

Page 2

Overall satisfactionPricingContacts
123

Page 3

Overall satisfactionPricingContacts
123
Step 1 active (of 3) 
<div style="width:100%;max-width:920px;margin:0 auto;padding:10px 0 4px;box-sizing:border-box;">
  <div style="padding:0 24px;">
    <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:flex-end;gap:12px;margin-bottom:16px;">
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Overall satisfaction</strong>
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Pricing</strong>
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Contacts</strong>
    </div>
    <div style="position:relative;height:56px;">
      <span style="position:absolute;left:16.666666666666668%;right:16.666666666666668%;top:50%;height:4px;background:#c9cfd3;transform:translateY(-50%);"></span>
      <span style="position:absolute;left:16.666666666666668%;top:50%;height:4px;background:#23b89e;transform:translateY(-50%);width:0%;"></span>
      <span style="width:48px;height:48px;border-radius:999px;background:#ffffff;border:5px solid #23b89e;color:#23b89e;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:16.666666666666664%;">1</span>
    <span style="width:48px;height:48px;border-radius:999px;background:#c9cfd3;border:none;color:#ffffff;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;">2</span>
    <span style="width:48px;height:48px;border-radius:999px;background:#c9cfd3;border:none;color:#ffffff;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:83.33333333333334%;">3</span>
    </div>
  </div>
</div>
Step 2 active (of 3) 
<div style="width:100%;max-width:920px;margin:0 auto;padding:10px 0 4px;box-sizing:border-box;">
  <div style="padding:0 24px;">
    <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:flex-end;gap:12px;margin-bottom:16px;">
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Overall satisfaction</strong>
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Pricing</strong>
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Contacts</strong>
    </div>
    <div style="position:relative;height:56px;">
      <span style="position:absolute;left:16.666666666666668%;right:16.666666666666668%;top:50%;height:4px;background:#c9cfd3;transform:translateY(-50%);"></span>
      <span style="position:absolute;left:16.666666666666668%;top:50%;height:4px;background:#23b89e;transform:translateY(-50%);width:33.33333333333333%;"></span>
      <span style="width:48px;height:48px;border-radius:999px;background:#23b89e;border:none;color:#ffffff;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:16.666666666666664%;">1</span>
    <span style="width:48px;height:48px;border-radius:999px;background:#ffffff;border:5px solid #23b89e;color:#23b89e;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;">2</span>
    <span style="width:48px;height:48px;border-radius:999px;background:#c9cfd3;border:none;color:#ffffff;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:83.33333333333334%;">3</span>
    </div>
  </div>
</div>
Step 3 active (of 3) 
<div style="width:100%;max-width:920px;margin:0 auto;padding:10px 0 4px;box-sizing:border-box;">
  <div style="padding:0 24px;">
    <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:flex-end;gap:12px;margin-bottom:16px;">
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Overall satisfaction</strong>
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Pricing</strong>
      <strong style="font-size:16px;line-height:1.2;color:#1d2637;font-weight:700;text-align:center;">Contacts</strong>
    </div>
    <div style="position:relative;height:56px;">
      <span style="position:absolute;left:16.666666666666668%;right:16.666666666666668%;top:50%;height:4px;background:#c9cfd3;transform:translateY(-50%);"></span>
      <span style="position:absolute;left:16.666666666666668%;top:50%;height:4px;background:#23b89e;transform:translateY(-50%);width:66.66666666666666%;"></span>
      <span style="width:48px;height:48px;border-radius:999px;background:#23b89e;border:none;color:#ffffff;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:16.666666666666664%;">1</span>
    <span style="width:48px;height:48px;border-radius:999px;background:#23b89e;border:none;color:#ffffff;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;">2</span>
    <span style="width:48px;height:48px;border-radius:999px;background:#ffffff;border:5px solid #23b89e;color:#23b89e;font-size:24px;font-weight:700;display:grid;place-items:center;position:absolute;top:50%;transform:translate(-50%,-50%);left:83.33333333333334%;">3</span>
    </div>
  </div>
</div>
  • Use one snippet per page so the active step and line fill advance progressively.
  • Keep short step labels to avoid wrapping on mobile.
  • Colors: active `#23b89e`, inactive line/dot `#c9cfd3`.

Four-Step Circular Progress

Radial Progress Indicator

Shows a circular quarter-by-quarter progress state with step heading and subtitle.

For Use In: BreezyBit HTML Content element

Page 1

1 of 4
Step 1 Overview of UI/UX

Page 2

2 of 4
Step 2 Overview of UI/UX

Page 3

3 of 4
Step 3 Overview of UI/UX

Page 4

4 of 4
Step 4 Overview of UI/UX
Step 1 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;align-items:center;gap:14px;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;">
    <div style="width:86px;height:86px;border-radius:999px;background:conic-gradient(#e84f82 25%, #e9edf2 25%);position:relative;flex:0 0 auto;box-shadow:0 2px 10px rgba(21,35,60,.12);">
      <div style="position:absolute;inset:9px;border-radius:999px;background:#fff;display:grid;place-items:center;">
        <strong style="font-size:20px;line-height:1;color:#e84f82;font-weight:700;">1 of 4</strong>
      </div>
    </div>
    <div style="display:grid;gap:4px;">
      <strong style="font-size:44px;line-height:1;color:#e84f82;font-weight:700;">Step 1</strong>
      <span style="font-size:20px;line-height:1.2;color:#263238;">Overview of UI/UX</span>
    </div>
  </div>
</div>
Step 2 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;align-items:center;gap:14px;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;">
    <div style="width:86px;height:86px;border-radius:999px;background:conic-gradient(#e84f82 50%, #e9edf2 50%);position:relative;flex:0 0 auto;box-shadow:0 2px 10px rgba(21,35,60,.12);">
      <div style="position:absolute;inset:9px;border-radius:999px;background:#fff;display:grid;place-items:center;">
        <strong style="font-size:20px;line-height:1;color:#e84f82;font-weight:700;">2 of 4</strong>
      </div>
    </div>
    <div style="display:grid;gap:4px;">
      <strong style="font-size:44px;line-height:1;color:#e84f82;font-weight:700;">Step 2</strong>
      <span style="font-size:20px;line-height:1.2;color:#263238;">Overview of UI/UX</span>
    </div>
  </div>
</div>
Step 3 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;align-items:center;gap:14px;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;">
    <div style="width:86px;height:86px;border-radius:999px;background:conic-gradient(#e84f82 75%, #e9edf2 75%);position:relative;flex:0 0 auto;box-shadow:0 2px 10px rgba(21,35,60,.12);">
      <div style="position:absolute;inset:9px;border-radius:999px;background:#fff;display:grid;place-items:center;">
        <strong style="font-size:20px;line-height:1;color:#e84f82;font-weight:700;">3 of 4</strong>
      </div>
    </div>
    <div style="display:grid;gap:4px;">
      <strong style="font-size:44px;line-height:1;color:#e84f82;font-weight:700;">Step 3</strong>
      <span style="font-size:20px;line-height:1.2;color:#263238;">Overview of UI/UX</span>
    </div>
  </div>
</div>
Step 4 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;align-items:center;gap:14px;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;">
    <div style="width:86px;height:86px;border-radius:999px;background:conic-gradient(#e84f82 100%, #e9edf2 100%);position:relative;flex:0 0 auto;box-shadow:0 2px 10px rgba(21,35,60,.12);">
      <div style="position:absolute;inset:9px;border-radius:999px;background:#fff;display:grid;place-items:center;">
        <strong style="font-size:20px;line-height:1;color:#e84f82;font-weight:700;">4 of 4</strong>
      </div>
    </div>
    <div style="display:grid;gap:4px;">
      <strong style="font-size:44px;line-height:1;color:#e84f82;font-weight:700;">Step 4</strong>
      <span style="font-size:20px;line-height:1.2;color:#263238;">Overview of UI/UX</span>
    </div>
  </div>
</div>
  • Use one snippet per page so the ring advances by 25% each step.
  • Center text follows `N of 4` format for clarity.
  • Colors: active ring/text `#e84f82`, remaining ring `#e9edf2`.

Five-Step Dot Progress

Dot Sequence Indicator

Simple row of circular step markers that fill progressively from left to right.

For Use In: BreezyBit HTML Content element

Page 1

Page 2

Page 3

Page 4

Page 5

Step 1 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:nowrap;overflow:auto;">
    <span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span>
  </div>
</div>
Step 2 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:nowrap;overflow:auto;">
    <span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span>
  </div>
</div>
Step 3 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:nowrap;overflow:auto;">
    <span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span>
  </div>
</div>
Step 4 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:nowrap;overflow:auto;">
    <span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#ffffff;border:3px solid #eb4f82;"></span>
  </div>
</div>
Step 5 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:nowrap;overflow:auto;">
    <span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span><span style="width:24px;height:24px;border-radius:999px;display:block;background:#eb4f82;border:3px solid #eb4f82;"></span>
  </div>
</div>
  • Use one snippet per page so one additional dot fills on each step.
  • This version is fixed to 5 steps.
  • Colors: active dot `#eb4f82`, inactive fill `#ffffff`, border `#eb4f82`.

Three-Step Check Circle Progress

Connected Circle Stepper

Three connected circles with completed checkmarks, current active step, and upcoming outlined step.

For Use In: BreezyBit HTML Content element

Page 1

123

Page 2

✓23

Page 3

✓✓3
Step 1 of 3 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="width:min(100%,460px);margin:0 auto;position:relative;display:grid;align-items:center;">
    <span style="position:absolute;left:38px;right:38px;top:50%;height:4px;background:#ea4f84;transform:translateY(-50%);"></span>
    <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;"><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ea4f84;color:#ffffff;font-size:36px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">1</span><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ffffff;color:#ea4f84;font-size:36px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">2</span><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ffffff;color:#ea4f84;font-size:36px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">3</span></div>
  </div>
</div>
Step 2 of 3 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="width:min(100%,460px);margin:0 auto;position:relative;display:grid;align-items:center;">
    <span style="position:absolute;left:38px;right:38px;top:50%;height:4px;background:#ea4f84;transform:translateY(-50%);"></span>
    <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;"><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ffffff;color:#ea4f84;font-size:30px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">&#10003;</span><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ea4f84;color:#ffffff;font-size:36px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">2</span><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ffffff;color:#ea4f84;font-size:36px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">3</span></div>
  </div>
</div>
Step 3 of 3 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="width:min(100%,460px);margin:0 auto;position:relative;display:grid;align-items:center;">
    <span style="position:absolute;left:38px;right:38px;top:50%;height:4px;background:#ea4f84;transform:translateY(-50%);"></span>
    <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;"><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ffffff;color:#ea4f84;font-size:30px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">&#10003;</span><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ffffff;color:#ea4f84;font-size:30px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">&#10003;</span><span style="width:58px;height:58px;border-radius:999px;border:3px solid #ea4f84;background:#ea4f84;color:#ffffff;font-size:36px;font-weight:700;display:grid;place-items:center;position:relative;z-index:2;">3</span></div>
  </div>
</div>
  • Use one snippet per page so the state advances from step 1 to step 3.
  • Completed steps show a checkmark icon.
  • Color token: `#ea4f84` for line and circle accents.

Five-Step Segmented Status Progress

Callout Progress Bar

Segmented horizontal progress bar with an in-line check and status callout.

For Use In: BreezyBit HTML Content element

Page 1

✓

Page 2

✓

Page 3

✓

Page 4

✓

Page 5

✓
Step 1 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:10px 0;">
  <div style="width:min(100%,620px);margin:0 auto;padding:8px;position:relative;">
    <div style="height:30px;border-radius:999px;background:#c9d0d8;position:relative;overflow:hidden;">
      <span style="position:absolute;left:0;top:0;bottom:0;width:20%;background:#5ec06d;"></span>
      <span style="position:absolute;left:20%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:40%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:60%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:80%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span>
      <span style="position:absolute;left:calc(20% - 12px);top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;background:#5ec06d;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;">&#10003;</span>
    </div>
  </div>
</div>
Step 2 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:10px 0;">
  <div style="width:min(100%,620px);margin:0 auto;padding:8px;position:relative;">
    <div style="height:30px;border-radius:999px;background:#c9d0d8;position:relative;overflow:hidden;">
      <span style="position:absolute;left:0;top:0;bottom:0;width:40%;background:#5ec06d;"></span>
      <span style="position:absolute;left:20%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:40%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:60%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:80%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span>
      <span style="position:absolute;left:calc(40% - 12px);top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;background:#5ec06d;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;">&#10003;</span>
    </div>
  </div>
</div>
Step 3 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:10px 0;">
  <div style="width:min(100%,620px);margin:0 auto;padding:8px;position:relative;">
    <div style="height:30px;border-radius:999px;background:#c9d0d8;position:relative;overflow:hidden;">
      <span style="position:absolute;left:0;top:0;bottom:0;width:60%;background:#5ec06d;"></span>
      <span style="position:absolute;left:20%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:40%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:60%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:80%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span>
      <span style="position:absolute;left:calc(60% - 12px);top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;background:#5ec06d;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;">&#10003;</span>
    </div>
  </div>
</div>
Step 4 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:10px 0;">
  <div style="width:min(100%,620px);margin:0 auto;padding:8px;position:relative;">
    <div style="height:30px;border-radius:999px;background:#c9d0d8;position:relative;overflow:hidden;">
      <span style="position:absolute;left:0;top:0;bottom:0;width:80%;background:#5ec06d;"></span>
      <span style="position:absolute;left:20%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:40%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:60%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:80%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span>
      <span style="position:absolute;left:calc(80% - 12px);top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;background:#5ec06d;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;">&#10003;</span>
    </div>
  </div>
</div>
Step 5 of 5 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:10px 0;">
  <div style="width:min(100%,620px);margin:0 auto;padding:8px;position:relative;">
    <div style="height:30px;border-radius:999px;background:#c9d0d8;position:relative;overflow:hidden;">
      <span style="position:absolute;left:0;top:0;bottom:0;width:100%;background:#5ec06d;"></span>
      <span style="position:absolute;left:20%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:40%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:60%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span><span style="position:absolute;left:80%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);"></span>
      <span style="position:absolute;left:calc(100% - 12px);top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;background:#5ec06d;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;">&#10003;</span>
    </div>
  </div>
</div>
  • Use one snippet per page so the bar advances by one segment each step.
  • Progress advances one segment per page without text labels.
  • Colors: success `#5ec06d`, base `#c9d0d8`.

Four-Step Checked Breadcrumb Progress

Checked Step Breadcrumb

Horizontal step labels with check icons, chevrons, and an active underline segment.

For Use In: BreezyBit HTML Content element

Page 1

✓ BUILD
›
✓ INTEGRATE
›
✓ SHARE
›
✓ RESULTS

Page 2

✓ BUILD
›
✓ INTEGRATE
›
✓ SHARE
›
✓ RESULTS

Page 3

✓ BUILD
›
✓ INTEGRATE
›
✓ SHARE
›
✓ RESULTS

Page 4

✓ BUILD
›
✓ INTEGRATE
›
✓ SHARE
›
✓ RESULTS
Step 1 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="width:min(100%,760px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;overflow:auto;white-space:nowrap;padding-bottom:2px;">
      <div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#263238;letter-spacing:.8px;font-weight:700;">BUILD</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">INTEGRATE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">SHARE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">RESULTS</strong>
</div>
    </div>
    <div style="position:relative;height:5px;background:#e8edf2;border-radius:999px;">
      <span style="position:absolute;left:0%;top:0;bottom:0;width:25%;background:#1fc286;border-radius:999px;"></span>
    </div>
  </div>
</div>
Step 2 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="width:min(100%,760px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;overflow:auto;white-space:nowrap;padding-bottom:2px;">
      <div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">BUILD</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#263238;letter-spacing:.8px;font-weight:700;">INTEGRATE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">SHARE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">RESULTS</strong>
</div>
    </div>
    <div style="position:relative;height:5px;background:#e8edf2;border-radius:999px;">
      <span style="position:absolute;left:25%;top:0;bottom:0;width:25%;background:#1fc286;border-radius:999px;"></span>
    </div>
  </div>
</div>
Step 3 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="width:min(100%,760px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;overflow:auto;white-space:nowrap;padding-bottom:2px;">
      <div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">BUILD</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">INTEGRATE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#263238;letter-spacing:.8px;font-weight:700;">SHARE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">RESULTS</strong>
</div>
    </div>
    <div style="position:relative;height:5px;background:#e8edf2;border-radius:999px;">
      <span style="position:absolute;left:50%;top:0;bottom:0;width:25%;background:#1fc286;border-radius:999px;"></span>
    </div>
  </div>
</div>
Step 4 of 4 
<div style="width:100%;max-width:100%;box-sizing:border-box;padding:8px 0;">
  <div style="width:min(100%,760px);margin:0 auto;display:grid;gap:12px;">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;overflow:auto;white-space:nowrap;padding-bottom:2px;">
      <div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">BUILD</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">INTEGRATE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#8b97a4;letter-spacing:.8px;font-weight:700;">SHARE</strong>
</div><span style="color:#b2bac4;font-size:20px;line-height:1;padding:0 2px;">&#8250;</span><div style="display:flex;align-items:center;gap:8px;min-width:0;">
  <span style="width:20px;height:20px;border-radius:999px;background:#1fc286;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto;">&#10003;</span>
  <strong style="font-size:16px;line-height:1;color:#263238;letter-spacing:.8px;font-weight:700;">RESULTS</strong>
</div>
    </div>
    <div style="position:relative;height:5px;background:#e8edf2;border-radius:999px;">
      <span style="position:absolute;left:75%;top:0;bottom:0;width:25%;background:#1fc286;border-radius:999px;"></span>
    </div>
  </div>
</div>
  • Use one snippet per page so the active underline moves from BUILD to RESULTS.
  • All steps show completed/check style to match the visual pattern.
  • Colors: accent `#1fc286`, inactive label `#8b97a4`, active label `#263238`.