Template:Home/FeaturedRegionCard: Difference between revisions

Revision as of 04:58, 26 August 2025

   No image

Untitled region

Unknown

Profile coming soon

@@ Line 12: / Line 12: @@
    <div class="fa-body">
-     <!-- Status + lineage -->
+     <!-- Title FIRST (moved above kicker) -->
+    <h3 class="fa-title">
+      {{#ifexist:{{{Page|}}}|
+        [[{{{Page}}}|{{{RegionName|{{{Page}}}}}}]]
+      | {{{RegionName|Untitled region}}} }}
+    </h3>
+    <!-- Kicker/lineage AFTER title -->
      <p class="fa-kicker">
-      <span class="k-item">
-        {{#switch:{{lc:{{{Status|unknown}}}}}
-          |stable=🟢|vulnerable=🟡|endangered=🟠|critical=🔴|extinct=⚫|unknown=⚪|#default=⚪}}
-        <span class="fa-status">{{ucfirst:{{lc:{{{Status|Unknown}}}}}}}</span>
-      </span>
        {{#if:{{{Path|{{{GPName|}}}}}}|
          <span class="k-item">{{{Path|{{{GPName|}}}}}}</span>
        }}
      </p>
-    <!-- Title -->
-    <h3 class="fa-title">
-      {{#ifexist:{{{Page|}}}|
-        [[{{{Page}}}|{{{RegionName|{{{Page}}}}}}]]
-      | {{{RegionName|Untitled region}}} }}
-    </h3>
      <!-- Location line -->
@@ Line 49: / Line 44: @@
      <p class="fa-hook">{{{Hook|}}}</p>
-     <!-- CTA -->
+     <!-- Footer block: Status pill above CTA -->
-     <p class="fa-cta">
+     <div class="fa-foot">
-      {{#ifexist:{{{Page|}}}|
+      <p class="fa-statusline">
-        [[{{{Page}}}|→ View region]]
+        <span class="status-pill sp--{{lc:{{{Status|unknown}}}}}"
-      | <span class="fa-missing">Profile coming soon</span> }}
+              aria-label="Conservation status: {{ucfirst:{{lc:{{{Status|Unknown}}}}}}}">
-     </p>
+          <span class="pill-dot"></span>
+          <span class="pill-text">{{ucfirst:{{lc:{{{Status|Unknown}}}}}}}</span>
+        </span>
+      </p>
+      <div class="fa-foot-sep" role="presentation"></div>
+      <!-- CTA -->
+      <p class="fa-cta">
+        {{#ifexist:{{{Page|}}}|
+          [[{{{Page}}}|→ View region]]
+        | <span class="fa-missing">Profile coming soon</span> }}
+      </p>
+     </div>
    </div>
 </div>