Step List

<h2 class="component-subtitle">Step List</h2>
<ul class="step-list">
    <li>
        <span class="badge">Badge lorem ipsum dolor</span><br />
        <p>
            <strong>Lorem ipsum dolor sit amet.</strong><br />
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum officiis quia, numquam praesentium facere nisi provident eius consectetur amet autem officia commodi eligendi optio sequi inventore pariatur earum culpa ipsam!
        </p>
        <p>
            <a href="#" class="">Lorem ipsum dolor <i class="fa fa-long-arrow-right"></i></a>
        </p>
    </li>
    <li>Exercitationem quis quo laborum error velit laudantium magni ab deleniti obcaecati quaerat eveniet impedit, illum debitis architecto dignissimos, nesciunt consequuntur veniam sit a, rerum nostrum aliquid hic voluptate. Alias, accusamus?</li>
    <li>Impedit id animi quidem sit eius nihil dolores quae vel soluta recusandae assumenda maiores maxime, perferendis reprehenderit beatae tenetur mollitia facere alias sint consequuntur. Animi aut iste exercitationem alias nostrum.</li>
    <li>Ut necessitatibus nam consequuntur doloribus nisi maxime sequi, dolorem sed et consequatur? Repellendus fuga ex illum tempore eaque adipisci voluptatibus libero quod iste totam. Accusantium ratione consequuntur quo asperiores laborum.</li>
    <li>Rem, laudantium. Accusantium sapiente nam repellendus perspiciatis, sequi in. Illo deleniti consequatur dicta voluptatum perspiciatis ullam, tempore nobis quis. Cum rem maxime accusantium quis illum omnis similique cumque iure aliquam.</li>
    <li>Veniam nam id, repudiandae porro neque harum ad culpa quam sed tenetur. Quasi, itaque! Repellendus vero possimus, excepturi ratione neque, odit placeat tempore alias molestias nihil reprehenderit at consectetur odio.</li>
</ul>

.step-list {
  list-style: none;
  padding-left: 0;
  margin: 2.4rem 0;

  > li {
    padding: 0 0 2.4rem 4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='8.5' fill='%231475FF' stroke='%23000A3C' stroke-width='7'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 0v24' stroke='%23000A3C'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat-y;

    &:last-child() {
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='8.5' fill='%231475FF' stroke='%23000A3C' stroke-width='7'/%3E%3C/svg%3E");
    }
  }
}