Hi, The current stepper style is hard coded to anchor tag making is difficult to add links in the description of a step.

I have modified my local copy so it is anchor friendly. Would be helpful if this change is implemented in the master too.

I have also added an option for a rectangular stepper so it can hold timestamp instead of just icons (example: [15:30])

Below is the modified _stepper.scss file

Start your code here

// Steppers

// Common styles for steppers

.stepper {
 li {
 .step {
 padding:24px;
 font-size:14px;
 text-align:center;
 .circle {
 display:inline-block;
 color:#fff;
 border-radius:50%;
 background:rgba(0,0,0,.38);
 width:24px;
 height:24px;
 text-align:center;
 line-height:24px;
 margin-right:8px;
 }
 .rectangle {
 display:inline-block;
 color:#fff;
 border-radius:3px;
 background:rgba(0,0,0,.38);
 width:42px;
 height:24px;
 text-align:center;
 line-height:24px;
 margin-right:8px;
 }
 .label {
 display:inline-block;
 color:rgba(0,0,0,.38);
 }
 }
 &.active, &.completed {
 .step {
 .circle, .rectangle {
 @extend .primary-color;
 }
 .label {
 font-weight:600;
 color:rgba(0,0,0,.87);
 }
 }
 }
 &.warning, .rectangle {
 .step {
 .circle {
 @extend .danger-color;
 }
 }
 }
 }
}

// Horizontal

.stepper-horizontal {
 position:relative;
 display:flex;
 justify-content: space-between;
 li {
 transition: 0.5s;
 display: flex;
 align-items: center;
 flex: 1;
 .step {
 .label {
 margin-top: 10px;
 }
 }
 &:not(:last-child):after {
 content: '';
 position: relative;
 flex: 1;
 margin: 8px 0 0 0;
 height: 1px;
 background-color: rgba(0,0,0,0.1);
 }
 &:not(:first-child):before {
 content: '';
 position: relative;
 flex: 1;
 margin: 8px 0 0 0;
 height: 1px;
 background-color: rgba(0,0,0,0.1);
 }
 &:hover {
 background:#ddd;
 }
 }
}

// Vertical

.stepper-vertical {
 position:relative;
 display:flex;
 flex-direction:column;
 justify-content: space-between;
 li {
 display: flex;
 align-items: flex-start;
 flex: 1;
 flex-direction: column;
 position:relative;
 .step {
 align-self: flex-start;
 display:flex;
 position:relative;
 .circle, .rectangle {
 order:1;
 }
 .label {
 flex-flow: column nowrap;
 order:2;
 }

 }
 &.completed {
 .step {
 .label {
 font-weight:500;
 }
 }
 }
 .step-content {
 display:block;
 margin-top:0;
 margin-left:50px;
 padding:15px;
 p {
 font-size:0.875rem;
 }
 }
 &:not(:last-child):after {
 content:" ";
 position:absolute;
 width:1px;
 height:calc(100% - 40px);
 left:35px;
 top:55px;
 background-color: rgba(0,0,0,0.1);
 }
 }
}