Note: The planet UI design system is an extension of the bootstrap framework.
Please also referer to the bootstrap documentation for best pratices while using the framework.
Stepper
CSS styles for this component are based on the bs-stepper package found here - https://www.npmjs.com/package/bs-stepper
Basic markup
Example
<div class="stepper-example">
<div class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#step1">
<button type="button" class="step-trigger" role="tab">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Step 1</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#step2">
<button type="button" class="step-trigger" role="tab">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Step 2</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#step3">
<button type="button" class="step-trigger" role="tab">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label">Step 3</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<div role="tabpanel" class="bs-stepper-pane" id="step1">
<div class="card w-100">
<div class="card-body">
<h4 class="card-title text-dark">General details</h4>
<div class="row">
<div class="col-12">
<label class="form-label small">Name</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">Legal entity name</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">Account manager</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">Description</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="bs-stepper-pane" id="step2">
<div class="card w-100">
<div class="card-body">
<h4 class="card-title text-dark">Address</h4>
<div class="row">
<div class="col-12">
<label class="form-label small">Address 1</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">Address 2</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">City</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">Country</label>
<select class="form-control">
<option>France</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="bs-stepper-pane" id="step3">
<div class="card w-100">
<div class="card-body">
<h4 class="card-title text-dark">Contact details</h4>
<div class="row">
<div class="col-12">
<label class="form-label small">Contact name</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">Contact email</label>
<input class="form-control" />
</div>
<div class="col-12">
<label class="form-label small">Website URL</label>
<input class="form-control" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="stepper-buttons">
<button class="btn btn-primary stepper-previous-btn">back</button>
<button class="btn btn-primary stepper-next-btn">next</button>
</button>
</div>