diff --git a/templates/records.html.j2 b/templates/records.html.j2
index 43d1a85..8cbb7c0 100644
--- a/templates/records.html.j2
+++ b/templates/records.html.j2
@@ -12,23 +12,25 @@
   <p class="lede">All-time record highs and lows for {{ display }}, and the dates they occurred, across
      {{ year_range[0] }}–{{ year_range[1] }} of daily climate history.</p>
 
-  <div class="table-wrap">
-    <table class="normals-table records-table">
-      <thead><tr><th>Metric</th><th>Record high</th><th>On</th><th>Record low</th><th>On</th></tr></thead>
-      <tbody>
-        {% for r in rows %}
-        <tr>
-          <td>{{ r.label }}</td>
-          <td>{{ r.high }}</td><td>{{ r.high_date }}</td>
-          <td>{{ r.low }}</td><td>{{ r.low_date }}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
+  <div class="records-grid">
+    {% for r in rows %}
+    <div class="record-card">
+      <h2 class="rc-metric">{{ r.label }}</h2>
+      <div class="rc-row rc-high">
+        <span class="rc-tag">{% if r.label == 'Precip' %}Wettest{% else %}Highest{% endif %}</span>
+        <span class="rc-val">{{ r.high }}</span>
+        <span class="rc-date">{{ r.high_date }}</span>
+      </div>
+      <div class="rc-row rc-low">
+        <span class="rc-tag">{% if r.label == 'Precip' %}Driest{% else %}Lowest{% endif %}</span>
+        <span class="rc-val">{{ r.low }}</span>
+        <span class="rc-date">{{ r.low_date }}</span>
+      </div>
+    </div>
+    {% endfor %}
   </div>
-  <p class="records-note muted">Rainfall has no meaningful record low, so its “record low”
-     column shows the <b>longest run of consecutive days without measurable rain</b> and the
-     date that dry spell began.</p>
+  <p class="records-note muted">For rainfall, the “driest” figure is the <b>longest run of consecutive
+     days without measurable rain</b>, dated to when that dry spell began.</p>
 
   <p><a class="cta" href="{{ base }}/#{{ '%.5f,%.5f' | format(city.lat, city.lon) }}">Grade {{ name }}'s weather now →</a></p>
   <p class="climate-foot muted"><a href="{{ base }}/climate/{{ city.slug }}">‹ Back to {{ name }} climate</a></p>