Use <article> element for example cards (#40965)

This makes semantic sense. REF: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article Co-authored-by: Patrick H. Lauke <[email protected]>
twbs · Dec 10, 2024 · ff7d1be · ff7d1be · beki-github · Dec 14, 2024
1 parent 1d92d0b
commit ff7d1be
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/site/layouts/partials/examples/main.html b/site/layouts/partials/examples/main.html
@@ -14,7 +14,7 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
     {{- $len := len $entry.examples -}}
     {{ if (eq $i 0) }}<div class="row">{{ end }}
       {{ if $entry.external -}}
-        <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
+        <article class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
           <svg class="bi fs-5 flex-shrink-0 mt-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
           <div>
             <h3 class="h5 mb-1">
@@ -32,9 +32,9 @@ <h3 class="h5 mb-1">
               </a>
             </p>
           </div>
-        </div>
+        </article>
       {{ else -}}
-        <div class="col-sm-6 col-md-3 mb-3">
+        <article class="col-sm-6 col-md-3 mb-3">
           {{- $exampleNameUrlized := $example.name | urlize -}}
           {{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
           <a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
@@ -55,7 +55,7 @@ <h3 class="h5 mb-1">
             </h3>
           </a>
           <p class="text-body-secondary">{{ $example.description }}</p>
-        </div>
+        </article>
       {{- end }}
     {{ if (eq (add $i 1) $len) }}</div>{{ end -}}
   {{ end -}}