Update highlight colors to match tachyons theme now :)

Author: mrmrs

components/articles/large-title-text/index.html

@@ -63,14 +63,13 @@ <h1 class="f2 f-subheadline-ns mb4">9.5.1 If the text will be read on the screen
   </p>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Large Title Text</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;pa3 pa5-ns&quot;&gt;
   &lt;h1 class=&quot;f2 f-subheadline-ns mb4&quot;&gt;9.5.1 If the text will be read on the screen, design it for that medium.&lt;/h1&gt;
   &lt;p class=&quot;gray f6 mb4 ttu tracked&quot;&gt;By Robert Bringhurst&lt;/p&gt;
@@ -307,6 +306,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/articles/left-title-top-border/index.html

@@ -61,14 +61,13 @@ <h2 class="f3 mid-gray lh-title">
   </div>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Left Title Top Border</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;cf ph3 ph5-ns pv5&quot;&gt;
   &lt;header class=&quot;fn fl-ns w-50-ns pr4-ns&quot;&gt;
     &lt;h1 class=&quot;f2 lh-title fw9 mb3 mt0 pt3 bt bw2&quot;&gt;
@@ -381,6 +380,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/articles/left-title/index.html

@@ -52,14 +52,13 @@ <h1 class="mb3 mt0 lh-title">Clay in a Potter's Hand</h1>
   </div>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Left Title</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;cf ph3 ph5-ns pv5&quot;&gt;
   &lt;header class=&quot;fn fl-ns w-50-ns pr4-ns&quot;&gt;
     &lt;h1 class=&quot;mb3 mt0 lh-title&quot;&gt;Clay in a Potter&#39;s Hand&lt;/h1&gt;
@@ -328,6 +327,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/articles/title-text-image/index.html

@@ -41,14 +41,13 @@ <h1 class="f2">Title Text with Image</h1>
   </p>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Title Text Image</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;pa3 pa5-ns&quot;&gt;
   &lt;h1 class=&quot;f2&quot;&gt;Title Text with Image&lt;/h1&gt;
   &lt;img src=&quot;/img/space.jpg&quot; class=&quot;w-100 f5 measure&quot; alt=&quot;outer space&quot;&gt;
@@ -235,6 +234,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/articles/title-text/index.html

@@ -40,14 +40,13 @@ <h1 class="">Title</h1>
   </p>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Title Text</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;pa3 pa5-ns&quot;&gt;
   &lt;h1 class=&quot;&quot;&gt;Title&lt;/h1&gt;
   &lt;p class=&quot;measure lh-copy&quot;&gt;
@@ -217,6 +216,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/collections/news-card/index.html

@@ -35,14 +35,13 @@ <h1 class="f6 ttu tracked">Daily News Co.</h1>
   </div>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">News Card</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;bg-white center mw5 ba b--black-10 mv4&quot;&gt;
   &lt;div class=&quot;pv2 ph3&quot;&gt;
      &lt;h1 class=&quot;f6 ttu tracked&quot;&gt;Daily News Co.&lt;/h1&gt;
@@ -316,6 +315,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/collections/product-card/index.html

@@ -42,14 +42,13 @@ <h2 class="f5 mv0">$1,000</h2>
   </div>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Product Card</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center&quot;&gt;
   &lt;img src=&quot;http://placekitten.com/g/600/300&quot; class=&quot;db w-100 br2 br--top&quot; alt=&quot;kitty&quot;&gt;
   &lt;div class=&quot;pa2 ph3-ns pb3-ns&quot;&gt;
@@ -343,6 +342,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/collections/profile-card-title-subtitle/index.html

@@ -32,14 +32,13 @@ <h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
   </div>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Profile Card Title Subtitle</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10&quot;&gt;
   &lt;div class=&quot;tc&quot;&gt;
     &lt;img src=&quot;/img/avatar_1.jpg&quot; class=&quot;br-100 h4 w4 dib ba b--black-05 pa2&quot; title=&quot;Kitty staring at you&quot;&gt;
@@ -296,6 +295,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/collections/profile-card/index.html

@@ -37,14 +37,13 @@ <h1 class="f4">Mimi Whitehouse</h1>
   </p>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Profile Card</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10&quot;&gt;
   &lt;div class=&quot;tc&quot;&gt;
     &lt;img src=&quot;/img/avatar_1.jpg&quot; class=&quot;br-100 h3 w3 dib&quot; title=&quot;Kitty staring at you&quot;&gt;
@@ -311,6 +310,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/collections/text-card/index.html

@@ -35,14 +35,13 @@ <h1 class="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">Title of card</h1>
   </div>
 </article>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Text Card</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;article class=&quot;center mw5 mw6-ns br3 hidden ba b--black-10 mv4&quot;&gt;
   &lt;h1 class=&quot;f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3&quot;&gt;Title of card&lt;/h1&gt;
   &lt;div class=&quot;pa3 bt b--black-10&quot;&gt;
@@ -293,6 +292,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/footers/simple-large-type/index.html

@@ -34,14 +34,13 @@
   </div>
 </footer>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Simple Large Type</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;footer class=&quot;ph3 ph4-ns pv6 bt b--black-10 black-70&quot;&gt;
   &lt;a href=&quot;mailto:&quot; class=&quot;link b f3 f2-ns dim black-70 lh-solid&quot;&gt;hello@email.com&lt;/a&gt;
   &lt;p class=&quot;f6 db b ttu lh-solid&quot;&gt;© 2016 COMPANY Inc.&lt;/p&gt;
@@ -322,6 +321,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/footers/small-print/index.html

@@ -33,14 +33,13 @@
   </div>
 </footer>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Small Print</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;footer class=&quot;pv4 ph3 ph5-m ph6-l mid-gray&quot;&gt;
   &lt;small class=&quot;f6 db tc&quot;&gt;© 2016 &lt;b class=&quot;ttu&quot;&gt;SOME COMPANY Inc&lt;/b&gt;., All Rights Reserved&lt;/small&gt;
   &lt;div class=&quot;tc mt3&quot;&gt;
@@ -288,6 +287,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>

components/footers/social-circles/index.html

@@ -51,14 +51,13 @@
   </a>
 </footer>
 
-  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70" style="background: #fafafa;">
+  <section data-name="component-info" class="pa3 pa5-ns bt b--black-10 black-70 bg-washed-blue">
   <h1 class="f4 f3-ns mt4">Social Circles</h1>
-
 <div class="cf">
 <div class="fl w-100 w-75-ns pr0 pr2-ns">
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
-<pre class="pa3 ba br2 b--black-05 h5" id="html">
+<pre class="pa3 ba br2 b--black-05 h5 bg-white-20" id="html">
 &lt;footer class=&quot;pv4 ph3 ph5-ns tc&quot;&gt;
   &lt;a class=&quot;link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10&quot; href=&quot;#&quot; title=&quot;&quot;&gt;
     &lt;svg data-icon=&quot;facebook&quot; viewBox=&quot;0 0 32 32&quot; style=&quot;fill:currentcolor&quot;&gt;
@@ -335,6 +334,10 @@ <h2 class="f5 mb2 ttc mid-gray">lists</h2>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/links-with-borders-inline/index.html">Links With Borders Inline</a>
 
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-large/index.html">Slab Stat Large</a>
+      
+        <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat-small/index.html">Slab Stat Small</a>
+      
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/slab-stat/index.html">Slab Stat</a>
 
         <a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/lists/title-text/index.html">Title Text</a>