I'm using Bootstrap. I'm doing my best to work with more semantic markup and getting away from divitis.
Several of these "card" blocks appear on a page, like this.
Original:
<div class="col-lg-4 mb-4">
<div class="card h-100">
<h4 class="card-header">Card Title</h4>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis ipsam eos, nam perspiciatis natus commodi similique totam consectetur praesentium molestiae atque exercitationem ut consequuntur, sed eveniet, magni nostrum sint fuga.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
Rewritten:
<section class="col-lg-4 mb-4">
<div class="card h-100">
<header>
<h4 class="card-header">Card Title</h4>
</header>
<section class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</section>
<footer class="card-footer">
<a href="#" class="btn btn-primary">Learn More</a>
</footer>
</div>
</section>
Could I improve the HTML?