Onboarding Flow

<section class="card shadow-sm" aria-labelledby="onboarding-title">
<header class="card-header">
	<h3 class="card-title" id="onboarding-title">Welcome to your workspace</h3>
	<p class="card-subtitle">Step 2 of 3 · Profile</p>
</header>

<div class="card-body grid gap-4">
	<ol class="stepper bg-primary bg-opacity-10 rounded col-12 col-md-4 p-3" role="list" aria-label="Onboarding progress">
		<li class="stepper-item is-completed">
			<span class="stepper-marker" aria-hidden="true">1</span>
			<div class="stepper-content"><strong class="stepper-label">Account</strong> <span class="badge bg-success">Done</span></div>
		</li>
		<li class="stepper-item" aria-current="step">
			<span class="stepper-marker" aria-hidden="true">2</span>
			<div class="stepper-content"><strong class="stepper-label">Profile</strong> <span class="badge bg-primary">Current</span></div>
		</li>
		<li class="stepper-item">
			<span class="stepper-marker" aria-hidden="true">3</span>
			<div class="stepper-content"><strong class="stepper-label">Preferences</strong><p class="stepper-status">Upcoming · Optional</p></div>
		</li>
	</ol>

	<form class="col-12 col-md-8 d-flex flex-column gap-3" action="/onboarding/preferences" method="post">
		<div>
			<label class="form-label is-required" for="displayName">Display name</label>
			<input class="form-control" id="displayName" name="displayName" type="text" required />
		</div>
		<div>
			<label class="form-label is-required" for="role">Role</label>
			<select class="form-select" id="role" name="role" required>
				<option value="">Select a role</option>
				<option value="developer">Developer</option>
			</select>
		</div>
		<footer class="d-flex flex-column flex-sm-row gap-2">
			<button class="btn btn-outline btn-secondary" type="button">Back</button>
			<button class="btn btn-solid btn-primary flex-sm-fill" type="submit">
				Continue to preferences
			</button>
		</footer>
	</form>
</div>
</section>