<a href="{{ .Permalink }}" class="card blog-card bc-next bg-color-4" rel="bookmark" > <div class="card-img-container"> {{ with .Resources.GetMatch "featuredImage" }} <p class="card-img-overlay">Next Article</p> <picture> {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}} <source srcset="{{ .Permalink }}" type="image/webp"> {{- end }} <source srcset="{{ .Permalink }}"> <img src="{{ .Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}> </picture> {{ end }} </div> <article class="card-body"> <h2 class="card-title">{{ .Title }}</h2> <p class="card-text">{{ if (isset .Params "description") }}{{ index .Params "description" | htmlUnescape }}{{ else }}{{ .Summary | plainify | htmlUnescape }}{{ end }}</p> <div class="card-subtext muted-text"> <p> Posted <time datetime="{{ .PublishDate.Format "2006-01-02 12:00" }}">{{ .PublishDate.Format "Jan 2, 2006" }}</time> </p> {{ if (isset .Params "categories") }} <p> {{ range .Params.categories }}#{{ . }} {{ end }} </p> {{ end }} </div> <p class="card-subtext muted-text">This is the next article in the same categorie</p> </article> </a>