Layout layoutonboardingsteps

Vertical Progress Steps

Large scale vertical steps with space for detailed descriptions.

Component preview not available for: step-layout-vertical

Ensure the filename matches StepLayoutVertical.astro

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { VerticalProgressSteps } from 'astro-component-kit';
---

<StepLayoutVertical>Content</StepLayoutVertical>
--- import { VerticalProgressSteps } from 'astro-component-kit'; --- <StepLayoutVertical>Content</StepLayoutVertical>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/VerticalProgressSteps.astro and paste the following code:

astro 
---
---
<div class="step-lay">
  <div class="step-line">
    <div class="step-point">1</div>
    <div class="step-point">2</div>
  </div>
  <div class="step-content">
    <div class="step-block"><h4>Setup</h4><p>Install the library.</p></div>
    <div class="step-block"><h4>Config</h4><p>Set up registry.</p></div>
  </div>
</div>
<style>
  .step-lay { display: flex; gap: 2.5rem; }
  .step-line { width: 40px; display: flex; flex-direction: column; align-items: center; gap: 5rem; position: relative; }
  .step-line::before { content: ""; position: absolute; height: 100%; width: 2px; background: rgba(255,255,255,0.05); z-index: -1; }
  .step-point { width: 34px; height: 34px; border-radius: 50%; background: #6366f1; color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 15px rgba(99,102,241,0.4); }
  .step-block { height: 90px; }
  h4 { margin: 0; color: #fff; font-size: 1.1rem; }
  p { color: #64748b; font-size: 0.9rem; margin-top: 0.4rem; }
</style>
--- --- <div class="step-lay"> <div class="step-line"> <div class="step-point">1</div> <div class="step-point">2</div> </div> <div class="step-content"> <div class="step-block"><h4>Setup</h4><p>Install the library.</p></div> <div class="step-block"><h4>Config</h4><p>Set up registry.</p></div> </div> </div> <style> .step-lay { display: flex; gap: 2.5rem; } .step-line { width: 40px; display: flex; flex-direction: column; align-items: center; gap: 5rem; position: relative; } .step-line::before { content: ""; position: absolute; height: 100%; width: 2px; background: rgba(255,255,255,0.05); z-index: -1; } .step-point { width: 34px; height: 34px; border-radius: 50%; background: #6366f1; color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 0 15px rgba(99,102,241,0.4); } .step-block { height: 90px; } h4 { margin: 0; color: #fff; font-size: 1.1rem; } p { color: #64748b; font-size: 0.9rem; margin-top: 0.4rem; } </style>

Quick Info

Category
Layout
Filename
VerticalProgressSteps.astro
Dependencies
None — pure Astro + CSS
Tags
layoutonboardingsteps