From 10199792cd58735b23e855cb924128469b73d9e4 Mon Sep 17 00:00:00 2001
From: Jacob Wilson <49299083+jdwjdwjdw@users.noreply.github.com>
Date: Wed, 29 May 2024 10:57:57 -0700
Subject: [PATCH] AIS-64 | @jdwjdwjdw | A11y and console fixups (#153)

Co-authored-by: Shea McKinney <sheamck@stanford.edu>
---
 content/examples/alerts.mdx             |  12 +-
 content/examples/cards.mdx              | 100 +++++------
 content/examples/containers.mdx         |   6 +-
 content/examples/form-elements.mdx      | 224 ++++++++++++++----------
 content/examples/grid-css-grid.mdx      |  20 +--
 content/examples/heros.mdx              |  14 +-
 content/examples/identity-bar.mdx       |   4 +-
 content/examples/layout.mdx             |   8 +-
 content/examples/logo.mdx               |  14 +-
 content/examples/modular-typography.mdx |  16 +-
 10 files changed, 229 insertions(+), 189 deletions(-)

diff --git a/content/examples/alerts.mdx b/content/examples/alerts.mdx
index f06e616..80d264b 100644
--- a/content/examples/alerts.mdx
+++ b/content/examples/alerts.mdx
@@ -40,7 +40,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               width="20" className="ml-02em">
               <path fillRule="evenodd"
                 d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clip-rule="evenodd"></path>
+                clipRule="evenodd"></path>
             </svg>
           </button>
         </div>
@@ -48,7 +48,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
           <span className="mr-5 inline-block">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"
               height="20" width="20">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                 d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
               </path>
             </svg>
@@ -72,7 +72,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               class="button group leading-display bg-transparent hocus:bg-transparent p-0 flex items-center w-fit sans font-semibold text-white hocus:text-white text-17 uppercase font-bold inline-block tracking-widest mr-0 ml-auto"
               type="button"><span>Dismiss</span><span class="sr-only">Information</span>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" height="20"
-              width="20" className="ml-02em">
+              width="20" class="ml-02em">
               <path fill-rule="evenodd"
                 d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                 clip-rule="evenodd"></path>
@@ -106,7 +106,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               width="20" className="ml-02em">
               <path fillRule="evenodd"
                 d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clip-rule="evenodd"></path>
+                clipRule="evenodd"></path>
             </svg>
           </button>
         </div>
@@ -122,7 +122,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               <path
                 fillRule="evenodd"
                 d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                clip-rule="evenodd"
+                clipRule="evenodd"
               ></path>
             </svg>
           </span>
@@ -137,4 +137,4 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
     </div>
   </Section>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/content/examples/cards.mdx b/content/examples/cards.mdx
index fc1d27f..1786155 100644
--- a/content/examples/cards.mdx
+++ b/content/examples/cards.mdx
@@ -6,38 +6,38 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
 <div className="lg:max-w-600 xl:max-w-800 2xl:max-w-1000">
   <Section heading="Alumni Travel/Study Card" width="full">
     ```html
-      <article className="flex flex-col group relative overflow-hidden bg-black-true break-words border-black w-full sm:max-w-[42rem] md:max-w-500">
-        <div className="aspect-w-3 aspect-h-2 overflow-hidden">
-          <img src="https://assets.stanford.edu/i/600x400/smart/filters:quality(60)/f/103430/4928x3264/b7a5d20844/giant-tortoise-san-cristobal-island-galapagos.jpg" className="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center" alt="" loading="lazy" width="600" height="400" />
+      <article class="flex flex-col group relative overflow-hidden bg-black-true break-words border-black w-full sm:max-w-[42rem] md:max-w-500">
+        <div class="aspect-w-3 aspect-h-2 overflow-hidden">
+          <img src="https://assets.stanford.edu/i/600x400/smart/filters:quality(60)/f/103430/4928x3264/b7a5d20844/giant-tortoise-san-cristobal-island-galapagos.jpg" class="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center" alt="" loading="lazy" width="600" height="400" />
         </div>
         <div>
-          <div className="rs-ml-1 relative mt-[-5.1rem] z-1">
-            <div className="rounded-full w-fit p-6 bg-gradient-to-tr from-black to-black group-hover:from-black-90 group-hover:to-black-90 group-focus-within:from-black-90 group-focus-within:to-black-90">
-              <div className="justify-center w-fit rounded-full flex flex-row items-center bg-black-true text-white px-20 min-w-[9rem] h-90">
-                <time dateTime="2023-06-24 00:00Z" className="flex flex-col">
-                  <span className="mb-8 ml-2 uppercase leading-none text-20 lg:text-22"> Jun</span>
-                  <span className="font-bold font-serif leading-trim text-[4.1rem]">24</span>
+          <div class="rs-ml-1 relative mt-[-5.1rem] z-1">
+            <div class="rounded-full w-fit p-6 bg-gradient-to-tr from-black to-black group-hover:from-black-90 group-hover:to-black-90 group-focus-within:from-black-90 group-focus-within:to-black-90">
+              <div class="justify-center w-fit rounded-full flex flex-row items-center bg-black-true text-white px-20 min-w-[9rem] h-90">
+                <time datetime="2023-06-24 00:00Z" class="flex flex-col">
+                  <span class="mb-8 ml-2 uppercase leading-none text-20 lg:text-22"> Jun</span>
+                  <span class="font-bold font-serif leading-trim text-[4.1rem]">24</span>
                 </time>
-                <span className="relative font-bold leading-trim top-11 text-m2 px-03em" aria-hidden="true">–</span>
-                <span className="sr-only">to</span>
-                <time dateTime="2023-07-03 00:00Z" className="flex flex-col">
-                  <span className="mb-8 ml-2 uppercase leading-none text-20 lg:text-22">Jul</span>
-                  <span className="font-bold font-serif leading-trim text-[4.1rem]">03</span>
+                <span class="relative font-bold leading-trim top-11 text-m2 px-03em" aria-hidden="true">–</span>
+                <span class="sr-only">to</span>
+                <time datetime="2023-07-03 00:00Z" class="flex flex-col">
+                  <span class="mb-8 ml-2 uppercase leading-none text-20 lg:text-22">Jul</span>
+                  <span class="font-bold font-serif leading-trim text-[4.1rem]">03</span>
                 </time>
               </div>
             </div>
           </div>
-          <div className="rs-pt-1 rs-px-2 rs-pb-3">
-            <a href="/travel-study/destinations/galapagos-family-2023/" className="stretched-link group z-20 mb-08em type-2 no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none text-white">
-              <h3 className="font-serif font-bold leading-display tracking-normal type-0 mt-0 relative inline text-white">Galápagos Islands</h3>
+          <div class="rs-pt-1 rs-px-2 rs-pb-3">
+            <a href="/travel-study/destinations/galapagos-family-2023/" class="stretched-link group z-20 mb-08em type-2 no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none text-white">
+              <h3 class="font-serif font-bold leading-display tracking-normal type-0 mt-0 relative inline text-white">Galápagos Islands</h3>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-                    className="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em relative inline-block group-hover:text-white group-focus:text-white">
+                    class="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em relative inline-block group-hover:text-white group-focus:text-white">
                 <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd">
                 </path>
               </svg>
             </a>
-            <p className="mt-4 mb-0 font-semibold text-white leading-display">With Young Explorer Program for kids ages 6+</p>
-            <p className="rs-mt-0 mb-0 card-paragraph text-black-20">Enjoy a family cruise through the remote island chain and encounter unique wildlife up close, including playful sea lions, giant tortoises and blue footed boobies.</p>
+            <p class="mt-4 mb-0 font-semibold text-white leading-display">With Young Explorer Program for kids ages 6+</p>
+            <p class="rs-mt-0 mb-0 card-paragraph text-black-20">Enjoy a family cruise through the remote island chain and encounter unique wildlife up close, including playful sea lions, giant tortoises and blue footed boobies.</p>
           </div>
         </div>
       </article>
@@ -80,34 +80,34 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
   </Section>
   <Section heading="Alumni Story Card" width="full">
     ```html
-    <article className="flex flex-col story-card group relative overflow-hidden break-words basefont-23 w-full sm:max-w-[42rem] md:max-w-500 border border-solid bg-clip-padding shadow-sm focus-within:shadow-md hover:shadow-md backface-hidden border-black-20 text-black">
-      <div className="story-card-image-wrapper relative aspect-w-3 aspect-h-2" aria-hidden="true">
-        <figure className="overflow-hidden w-full h-full">
+    <article class="flex flex-col story-card group relative overflow-hidden break-words basefont-23 w-full sm:max-w-[42rem] md:max-w-500 border border-solid bg-clip-padding shadow-sm focus-within:shadow-md hover:shadow-md backface-hidden border-black-20 text-black">
+      <div class="story-card-image-wrapper relative aspect-w-3 aspect-h-2" aria-hidden="true">
+        <figure class="overflow-hidden w-full h-full">
           <img
             src="https://img2.storyblok.com/f/103430/532x353/1e9c786a10/aapi_month.PNG"
-            className="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center"
+            class="object-cover w-full h-full transition-transform transform-gpu group-hover:scale-[1.03] group-focus-within:scale-[1.03] object-center"
             alt="" loading="lazy" width="600" height="400" />
         </figure>
       </div>
-      <div className="story-card-content flex-1 bg-white rs-pt-2 rs-px-2 rs-pb-3">
+      <div class="story-card-content flex-1 bg-white rs-pt-2 rs-px-2 rs-pb-3">
         <a href="https://news.stanford.edu/report/2023/05/02/asian-american-pacific-islander-month-stanford/"
-            className="stretched-link group z-20 rs-mt-2 mb-02em no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none type-1 text-black hocus:text-black">
-          <h3 className="font-serif font-bold leading-display tracking-normal relative inline type-0">
+            class="stretched-link group z-20 rs-mt-2 mb-02em no-underline hocus:underline underline-offset-[3px] decoration-[0.12em] decoration-digital-red-light focus:outline-none type-1 text-black hocus:text-black">
+          <h3 class="font-serif font-bold leading-display tracking-normal relative inline type-0">
             <span>Asian American and Pacific Islander Heritage Month at Stanford</span>
           </h3>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-                className="transition w-08em ml-02em -rotate-45 group-hover:-rotate-45 group-focus:-rotate-45 transform-gpu group-hover:translate-x-01em group-focus:translate-x-01em group-hover:-translate-y-01em group-focus:-translate-y-01em relative inline-block text-digital-red-light">
-            <path fillRule="evenodd"
+                class="transition w-08em ml-02em -rotate-45 group-hover:-rotate-45 group-focus:-rotate-45 transform-gpu group-hover:translate-x-01em group-focus:translate-x-01em group-hover:-translate-y-01em group-focus:-translate-y-01em relative inline-block text-digital-red-light">
+            <path fill-rule="evenodd"
                   d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"></path>
+                  clip-rule="evenodd"></path>
           </svg>
-          <span className="sr-only"> (external link)</span>
+          <span class="sr-only"> (external link)</span>
         </a>
-        <p className="card-paragraph leading-display font-serif rs-mb-0">
-          <span className="italic">from</span>
+        <p class="card-paragraph leading-display font-serif rs-mb-0">
+          <span class="italic">from</span>
           <span>Stanford Report</span>
         </p>
-        <p className="mb-0 leading-snug card-paragraph">
+        <p class="mb-0 leading-snug card-paragraph">
           Explore a variety of campus offerings that include art, music, and lectures recognize and celebrate the contributions of Asians, Asian Americans, and Pacific Islanders.
         </p>
       </div>
@@ -146,22 +146,22 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
   </Section>
   <Section heading="Alumni Basic Card" width="full">
     ```html
-    <div className="basic-card w-full basefont-23 break-words rs-pt-3 bg-white text-black border border-solid border-black-20 bg-clip-padding shadow-sm md:max-w-30">
-      <div className="w-[12rem] h-[12rem] md:w-[14rem] md:h-[14rem] rounded-full border-[7px] border-solid overflow-hidden print:hidden border-lagunita-light bg-lagunita-light rs-ml-2" aria-hidden="true">
+    <div class="basic-card w-full basefont-23 break-words rs-pt-3 bg-white text-black border border-solid border-black-20 bg-clip-padding shadow-sm md:max-w-30">
+      <div class="w-[12rem] h-[12rem] md:w-[14rem] md:h-[14rem] rounded-full border-[7px] border-solid overflow-hidden print:hidden border-lagunita-light bg-lagunita-light rs-ml-2" aria-hidden="true">
         <img src="https://assets.stanford.edu/i/200x200/smart/filters:quality(60)/f/103430/2700x1013/f134a087bb/career-mid-career.jpg"
-              className="object-cover w-full h-full object-center" alt="" loading="lazy" width="126" height="126" />
+              class="object-cover w-full h-full object-center" alt="" loading="lazy" width="126" height="126" />
       </div>
-      <div className="flex flex-col card-body rs-px-2 rs-pt-2 rs-pb-4 items-start">
-        <h3 className="font-serif type-2 font-bold leading-display mb-0">Career Connections</h3>
-        <div className="wysiwyg text-current card-paragraph children:leading-snug children:!mb-06em last:children:!mb-0 rs-mt-neg1">
+      <div class="flex flex-col card-body rs-px-2 rs-pt-2 rs-pb-4 items-start">
+        <h3 class="font-serif type-2 font-bold leading-display mb-0">Career Connections</h3>
+        <div class="wysiwyg text-current card-paragraph children:leading-snug children:!mb-06em last:children:!mb-0 rs-mt-neg1">
           <p>Looking to make a career change or network with other alumni? Don’t miss out on our career resources.</p>
         </div>
-        <div className="rs-mt-2">
-          <div className="block print:hidden text-left text-19 md:text-21 xl:text-23">
-            <a className="flex w-fit group transition-colors no-underline underline-offset-[3px] hocus:underline text-digital-red-light hocus:text-digital-red" href="/career-connections/">
+        <div class="rs-mt-2">
+          <div class="block print:hidden text-left text-19 md:text-21 xl:text-23">
+            <a class="flex w-fit group transition-colors no-underline underline-offset-[3px] hocus:underline text-digital-red-light hocus:text-digital-red" href="/career-connections/">
               <span>See career resources</span>
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
-                    className="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em inline-block text-digital-red-light group-hover:text-digital-red group-focus:text-digital-red">
+                    class="transition w-08em ml-03em -mt-02em transform-gpu group-hover:translate-x-02em group-focus:translate-x-02em inline-block text-digital-red-light group-hover:text-digital-red group-focus:text-digital-red">
                 <path fillRule="evenodd"
                       d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                       clipRule="evenodd"></path>
@@ -213,16 +213,16 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
     </div>
   </div>
   ```
-  <div class="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
-    <div class="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
+  <div className="card block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md md:max-w-500">
+    <div className="overflow-hidden aspect-[16/9] relative" aria-hidden="true">
       <img src="https://library.stanford.edu/_next/image?url=https%3A%2F%2Flibrary.sites-pro.stanford.edu%2Fsites%2Flibrary%2Ffiles%2Fstyles%2Fbreakpoint_2xl_2x%2Fpublic%2Fmedia%2Fimage%2Fmain-board-computer-chips-electronics_0.jpg%3Fitok%3D6L7_jfYo&w=1920&q=75" />
     </div>
-    <div class="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
-      <h3 class="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
+    <div className="card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
+      <h3 className="leading-tight font-bold type-2 mb-03em">Gordon Moore papers, 1958–2005</h3>
       <div>
-        <p class=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
+        <p className=" max-w-[100ch]">This collection contains Moore’s Intel lab notebooks, personal and business correspondence, Intel presentations, memos and white papers, personal notes from meetings, greeting cards, photographs, cassette tapes and videos. The materials date from 1958 to 2005, but the majority dates from 1968 to 1999.</p>
       </div>
-      <a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" class="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
+      <a rel="nofollow" aria-label="View the collection of Gordon Moore's papers, 1958 - 2005" className="rounded-full cta-button font-semibold leading-display block w-fit no-underline hocus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hover:bg-cardinal-red-dark focus:bg-black-true active:bg-black-true text-white hocus:text-white rs-mt-neg1" href="https://searchworks.stanford.edu/view/10626780">View the collection</a>
     </div>
   </div>
   </Section>
diff --git a/content/examples/containers.mdx b/content/examples/containers.mdx
index c44edf1..ef53ef2 100644
--- a/content/examples/containers.mdx
+++ b/content/examples/containers.mdx
@@ -5,7 +5,7 @@ lastUpdatedDate: 2023-04-28T12:00:00.000Z
 
 <Section heading="Usage:" width="full" className="max-w-1200">
   ```html
-  <div className="cc rs-py-2 px-20 bg-black-10 mb-40">
+  <div class="cc rs-py-2 px-20 bg-black-10 mb-40">
     <div>This is a container example</div>
   </div>
   ```
@@ -14,7 +14,7 @@ lastUpdatedDate: 2023-04-28T12:00:00.000Z
   </div>
 
   ```html
-  <div className="w-full rs-py-2 px-20 bg-black-10 mb-40">
+  <div class="w-full rs-py-2 px-20 bg-black-10 mb-40">
     <div>This is a container example</div>
   </div>
   ```
@@ -23,7 +23,7 @@ lastUpdatedDate: 2023-04-28T12:00:00.000Z
   </div>
 
   ```html
-  <div className="w-screen rs-py-2 px-20 bg-black-10 mb-40">
+  <div class="w-screen rs-py-2 px-20 bg-black-10 mb-40">
     <div>This is a container example</div>
   </div>
   ```
diff --git a/content/examples/form-elements.mdx b/content/examples/form-elements.mdx
index 0a8a243..fd63beb 100644
--- a/content/examples/form-elements.mdx
+++ b/content/examples/form-elements.mdx
@@ -6,7 +6,7 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <div className="mb-30">
     ```html
     <fieldset>
-      <legend className="legend">Label</legend>
+      <legend class="legend">Label</legend>
       ...
     </fieldset>
     ```
@@ -19,9 +19,11 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Text Input</legend>
     ```html
-    <input className="input" id="input__text" type="text" />
+    <label for="input__text" class="sr-only">Text Input</label>
+    <input class="input" id="input__text" type="text" />
     ```
     <p>
+      <label htmlFor="input__text" className="sr-only">Text Input</label>
       <input className="input" id="input__text" type="text" />
     </p>
   </fieldset>
@@ -29,9 +31,11 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Password</legend>
     ```html
-    <input className="input" id="input__password" type="password" />
+    <label for="input__password" class="sr-only">Password</label>
+    <input class="input" id="input__password" type="password" />
     ```
     <p>
+      <label htmlFor="input__password" className="sr-only">Password</label>
       <input className="input" id="input__password" type="password" />
     </p>
   </fieldset>
@@ -39,9 +43,11 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Web Address</legend>
     ```html
-    <input className="input" id="input__webaddress" type="url" />
+    <label for="input__webaddress" class="sr-only">Web Address</label>
+    <input class="input" id="input__webaddress" type="url" />
     ```
     <p>
+      <label htmlFor="input__webaddress" className="sr-only">Web Address</label>
       <input className="input" id="input__webaddress" type="url" />
     </p>
   </fieldset>
@@ -49,19 +55,23 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Email Address</legend>
     ```html
-    <input className="input" id="input__emailaddress" type="email" />
+    <label for="input__emailaddress" class="sr-only">Email Address</label>
+    <input class="input" id="input__emailaddress" type="email" />
     ```
     <p>
-      <input className="input" id="input__emailaddress" type="email" />
+      <label for="input__emailaddress" class="sr-only">Email Address</label>
+      <input class="input" id="input__emailaddress" type="email" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Phone Number</legend>
     ```html
-    <input className="input" id="input__phone" type="tel" />
+    <label for="input__phone" class="sr-only">Phone Number</label>
+    <input class="input" id="input__phone" type="tel" />
     ```
     <p>
+      <label htmlFor="input__phone" className="sr-only">Phone Number</label>
       <input className="input" id="input__phone" type="tel" />
     </p>
   </fieldset>
@@ -69,9 +79,11 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Search</legend>
     ```html
-    <input className="input" id="input__search" type="search" />
+    <label for="input__search" class="sr-only">Search</label>
+    <input class="input" id="input__search" type="search" />
     ```
     <p>
+      <label htmlFor="input__search" className="sr-only">Search</label>
       <input className="input" id="input__search" type="search" />
     </p>
   </fieldset>
@@ -79,30 +91,36 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Number Input</legend>
     ```html
-    <input className="input" id="input__text2" type="number" />
+    <label for="input__number" class="sr-only">Number Input</label>
+    <input class="input" id="input__number" type="number" />
     ```
     <p>
-      <input className="input" id="input__text2" type="number" />
+      <label htmlFor="input__number" className="sr-only">Number Input</label>
+      <input className="input" id="input__number" type="number" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Error</legend>
     ```html
-    <input className="input is-error" id="input__text3" type="text" />
+    <label for="input__is-error" class="sr-only">Error</label>
+    <input class="input is-error" id="input__is-error" type="text" />
     ```
     <p>
-      <input className="input is-error" id="input__text3" type="text" />
+      <label htmlFor="input__is-error" className="sr-only">Error</label>
+      <input className="input is-error" id="input__is-error" type="text" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Valid</legend>
     ```html
-    <input className="input is-valid" id="input__text4" type="text" />
+    <label for="input__is-valid" class="sr-only">Valid</label>
+    <input class="input is-valid" id="input__valid" type="text" />
     ```
     <p>
-      <input className="input is-valid" id="input__text4" type="text" />
+      <label htmlFor="input__is-valid" className="sr-only">Valid</label>
+      <input className="input is-valid" id="input__is-valid" type="text" />
     </p>
   </fieldset>
 </Section>
@@ -111,7 +129,8 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Select</legend>
     ```html
-    <select className="select" id="select">
+    <label for="select" class="sr-only">Select</label>
+    <select class="select" id="select">
       <optgroup label="Option Group">
         <option>Option One</option>
         <option>Option Two</option>
@@ -120,6 +139,7 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
     </select>
     ```
     <p>
+      <label htmlFor="select" className="sr-only">Select</label>
       <select className="select" id="select">
         <optgroup label="Option Group">
           <option>Option One</option>
@@ -136,43 +156,41 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
     ```html
     <ul>
       <li>
-        <input className="checkbox" id="checkbox1" name="checkbox" type="checkbox" checked="checked" />
-        <label className="label" for="checkbox1">Choice A</label>
+        <input class="checkbox" id="checkbox1" name="checkbox" type="checkbox" checked="true" />
+        <label class="label" for="checkbox1">Choice A</label>
+      </li>
+      <li>
+        <input class="checkbox" id="checkbox2" name="checkbox" type="checkbox" />
+        <label class="label" for="checkbox2">Choice B</label>
+      </li>
+      <li>
+        <input class="checkbox" id="checkbox3" name="checkbox" type="checkbox" />
+        <label class="label" for="checkbox3">Choice C</label>
+      </li>
+      <li>
+        <input class="checkbox" id="checkbox4" name="checkbox" type="checkbox" />
+        <label class="label" for="checkbox4">Choice D</label>
+      </li>
+    </ul>
+    ```
+    <ul>
+      <li>
+        <input className="checkbox" id="checkbox1" name="checkbox" type="checkbox" defaultChecked={true} />
+        <label className="label" htmlFor="checkbox1">Choice A</label>
       </li>
       <li>
         <input className="checkbox" id="checkbox2" name="checkbox" type="checkbox" />
-        <label className="label" for="checkbox2">Choice B</label>
+        <label className="label" htmlFor="checkbox2">Choice B</label>
       </li>
       <li>
         <input className="checkbox" id="checkbox3" name="checkbox" type="checkbox" />
-        <label className="label" for="checkbox3">Choice C</label>
+        <label className="label" htmlFor="checkbox3">Choice C</label>
       </li>
       <li>
         <input className="checkbox" id="checkbox4" name="checkbox" type="checkbox" />
-        <label className="label" for="checkbox3">Choice D</label>
+        <label className="label" htmlFor="checkbox4">Choice D</label>
       </li>
     </ul>
-    ```
-    <p>
-      <ul>
-        <li>
-          <input className="checkbox" id="checkbox1" name="checkbox" type="checkbox" checked="checked" />
-          <label className="label" for="checkbox1">Choice A</label>
-        </li>
-        <li>
-          <input className="checkbox" id="checkbox2" name="checkbox" type="checkbox" />
-          <label className="label" for="checkbox2">Choice B</label>
-        </li>
-        <li>
-          <input className="checkbox" id="checkbox3" name="checkbox" type="checkbox" />
-          <label className="label" for="checkbox3">Choice C</label>
-        </li>
-        <li>
-          <input className="checkbox" id="checkbox4" name="checkbox" type="checkbox" />
-          <label className="label" for="checkbox3">Choice D</label>
-        </li>
-      </ul>
-    </p>
   </fieldset>
 </Section>
 
@@ -181,42 +199,40 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
     ```html
     <ul>
       <li>
-        <input className="radio" id="radio1" name="radio" type="radio" checked="checked" />
-        <label className="label" for="radio1">Option 1</label>
+        <input class="radio" id="radio1" name="radio" type="radio" checked="true" />
+        <label class="label" for="radio1">Option 1</label>
+      </li>
+      <li>
+        <input class="radio" id="radio2" name="radio" type="radio" />
+        <label class="label" for="radio2">Option 2</label>
+      </li>
+      <li>
+        <input class="radio" id="radio3" name="radio" type="radio" />
+        <label class="label" for="radio3">Option 3</label>
+      </li>
+    </ul>
+    ```
+    <ul>
+      <li>
+        <input className="radio" id="radio1" name="radio" type="radio" defaultChecked={true} />
+        <label className="label" htmlFor="radio1">Option 1</label>
       </li>
       <li>
         <input className="radio" id="radio2" name="radio" type="radio" />
-        <label className="label" for="radio2">Option 2</label>
+        <label className="label" htmlFor="radio2">Option 2</label>
       </li>
       <li>
         <input className="radio" id="radio3" name="radio" type="radio" />
-        <label className="label" for="radio3">Option 3</label>
+        <label className="label" htmlFor="radio3">Option 3</label>
       </li>
     </ul>
-    ```
-    <p>
-      <ul>
-        <li>
-          <input className="radio" id="radio1" name="radio" type="radio" checked="checked" />
-          <label className="label" for="radio1">Option 1</label>
-        </li>
-        <li>
-          <input className="radio" id="radio2" name="radio" type="radio" />
-          <label className="label" for="radio2">Option 2</label>
-        </li>
-        <li>
-          <input className="radio" id="radio3" name="radio" type="radio" />
-          <label className="label" for="radio3">Option 3</label>
-        </li>
-      </ul>
-    </p>
   </fieldset>
 </Section>
 
 <Section heading="Textarea">
   <fieldset className="mb-20">
     ```html
-    <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here" className="textarea"></textarea>
+    <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here" class="textarea"></textarea>
     ```
     <p>
       <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here" className="textarea"></textarea>
@@ -228,80 +244,96 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Color input</legend>
     ```html
-    <input className="input" type="color" id="ic" value="#000000" />
+    <label for="ic" class="sr-only">Color input</label>
+    <input class="input" type="color" id="ic" value="#000000" />
     ```
     <p>
-      <input className="input" type="color" id="ic" value="#000000" />
+      <label htmlFor="ic" className="sr-only">Color input</label>
+      <input className="input" type="color" id="ic" defaultValue="#000000" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Number input</legend>
     ```html
-    <input className="input" type="number" id="in" min="0" max="10" value="5" />
+    <label for="in" class="sr-only">Number input</label>
+    <input class="input" type="number" id="in" min="0" max="10" value="5" />
     ```
     <p>
-      <input className="input" type="number" id="in" min="0" max="10" value="5" />
+      <label htmlFor="in" className="sr-only">Number input</label>
+      <input className="input" type="number" id="in" min="0" max="10" defaultValue="5" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Range input</legend>
     ```html
-    <input className="input" type="range" id="ir" value="10" />
+    <label for="ir" class="sr-only">Range input</label>
+    <input class="input" type="range" id="ir" value="10" />
     ```
     <p>
-      <input className="input" type="range" id="ir" value="10" />
+      <label htmlFor="ir" className="sr-only">Range input</label>
+      <input className="input" type="range" id="ir" defaultValue="10" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Date input</legend>
     ```html
-    <input className="input" type="date" id="idd" value="1970-01-01" />
+    <label for="idd" class="sr-only">Date input</label>
+    <input class="input" type="date" id="idd" value="1970-01-01" />
     ```
     <p>
-      <input className="input" type="date" id="idd" value="1970-01-01" />
+      <label htmlFor="idd" className="sr-only">Date input</label>
+      <input className="input" type="date" id="idd" defaultValue="1970-01-01" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Month input</legend>
     ```html
-    <input className="input" type="month" id="idm" value="1970-01" />
+    <label for="idm" class="sr-only">Month input</label>
+    <input class="input" type="month" id="idm" value="1970-01" />
     ```
     <p>
-      <input className="input" type="month" id="idm" value="1970-01" />
+      <label htmlFor="idm" className="sr-only">Month input</label>
+      <input className="input" type="month" id="idm" defaultValue="1970-01" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Week input</legend>
     ```html
-    <input className="input" type="week" id="idw" value="1970-W01" />
+    <label for="idw" class="sr-only">Week input</label>
+    <input class="input" type="week" id="idw" value="1970-W01" />
     ```
     <p>
-      <input className="input" type="week" id="idw" value="1970-W01" />
+      <label htmlFor="idw" className="sr-only">Week input</label>
+      <input className="input" type="week" id="idw" defaultValue="1970-W01" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Datetime input</legend>
     ```html
-    <input className="input" type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
+    <label for="idt" class="sr-only">Datetime input</label>
+    <input class="input" type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
     ```
     <p>
-      <input className="input" type="datetime" id="idt" value="1970-01-01T00:00:00Z" />
+      <label htmlFor="idt" className="sr-only">Datetime input</label>
+      <input className="input" type="datetime" id="idt" defaultValue="1970-01-01T00:00:00Z" />
     </p>
   </fieldset>
 
   <fieldset className="mb-20">
     <legend className="legend">Datetime-local input</legend>
     ```html
-    <input className="input" type="datetime-local" id="idtl" value="1970-01-01T00:00" />
+    <label for="idtl" class="sr-only">Datetime-local input</label>
+    <input class="input" type="datetime-local" id="idtl" value="1970-01-01T00:00" />
     ```
     <p>
-      <input className="input" type="datetime-local" id="idtl" value="1970-01-01T00:00" />
+      <label htmlFor="idtl" className="sr-only">Datetime-local input</label>
+      <input className="input" type="datetime-local" id="idtl" defaultValue="1970-01-01T00:00" />
     </p>
   </fieldset>
 </Section>
@@ -310,25 +342,33 @@ lastUpdatedDate: 2023-05-02T12:00:00.000Z
   <fieldset className="mb-20">
     <legend className="legend">Action buttons</legend>
     ```html
-    <input className="button" type="submit" value="<input type=submit>" />
-    <input className="button" type="button" value="<input type=button>" />
-    <input className="button" type="reset" value="<input type=reset>" />
-    <input className="button" type="submit" value="<input disabled>" disabled="" />
-    <button className="button" type="submit">&lt;button type=submit&gt;</button>
-    <button className="button" type="button">&lt;button type=button&gt;</button>
-    <button className="button" type="reset">&lt;button type=reset&gt;</button>
-    <button className="button" type="button" disabled="">&lt;button disabled&gt;</button>
+    <label for="input__submit" class="sr-only">Submit input</label>
+    <input id="input__submit" class="button" type="submit" value="<input type=submit>" />
+    <label for="input__button" class="sr-only">Button input</label>
+    <input id="input__button" class="button" type="button" value="<input type=button>" />
+    <label for="input__reset" class="sr-only">Reset input</label>
+    <input id="input__reset" class="button" type="reset" value="<input type=reset>" />
+    <label for="input__disabled" class="sr-only">Disabled submit input</label>
+    <input id="input__disabled" class="button" type="submit" value="<input disabled>" disabled />
+    <button class="button" type="submit">&lt;button type=submit&gt;</button>
+    <button class="button" type="button">&lt;button type=button&gt;</button>
+    <button class="button" type="reset">&lt;button type=reset&gt;</button>
+    <button class="button" type="button" disabled>&lt;button disabled&gt;</button>
     ```
 
     <p className="flex gap-[4px] flex-wrap">
-      <input className="button" type="submit" value="<input type=submit>" />
-      <input className="button" type="button" value="<input type=button>" />
-      <input className="button" type="reset" value="<input type=reset>" />
-      <input className="button" type="submit" value="<input disabled>" disabled="" />
+      <label htmlFor="input__submit" className="sr-only">Submit input</label>
+      <input id="input__submit" className="button" type="submit" defaultValue="<input type=submit>" />
+      <label htmlFor="input__button" className="sr-only">Button input</label>
+      <input id="input__button" className="button" type="button" defaultValue="<input type=button>" />
+      <label htmlFor="input__reset" className="sr-only">Reset input</label>
+      <input id="input__reset" className="button" type="reset" defaultValue="<input type=reset>" />
+      <label htmlFor="input__disabled" className="sr-only">Disabled submit input</label>
+      <input id="input__disabled" className="button" type="submit" defaultValue="<input disabled>" disabled />
       <button className="button" type="submit">&lt;button type=submit&gt;</button>
       <button className="button" type="button">&lt;button type=button&gt;</button>
       <button className="button" type="reset">&lt;button type=reset&gt;</button>
-      <button className="button" type="button" disabled="">&lt;button disabled&gt;</button>
+      <button className="button" type="button" disabled>&lt;button disabled&gt;</button>
     </p>
   </fieldset>
 </Section>
diff --git a/content/examples/grid-css-grid.mdx b/content/examples/grid-css-grid.mdx
index 0c20f67..eee0edb 100644
--- a/content/examples/grid-css-grid.mdx
+++ b/content/examples/grid-css-grid.mdx
@@ -35,30 +35,30 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
       </div>
     </div>
     ```
-    <div class="overflow-hidden">
-      <div class="grid grid-cols-3 grid-gap">
-        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+    <div className="overflow-hidden">
+      <div className="grid grid-cols-3 grid-gap">
+        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           1
         </div>
-        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           2
         </div>
-        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           3
         </div>
-        <div class="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div className="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
           4
         </div>
-        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           5
         </div>
-        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           6
         </div>
-        <div class="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div className="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
           7
         </div>
-        <div class="col-span-3 bg-sky text-white flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div className="col-span-3 bg-sky text-white flex justify-center items-center rs-p-3 type-3 font-bold">
           8
         </div>
       </div>
diff --git a/content/examples/heros.mdx b/content/examples/heros.mdx
index c86b7f2..eb0e271 100644
--- a/content/examples/heros.mdx
+++ b/content/examples/heros.mdx
@@ -9,7 +9,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
         <div class="h-full w-full overflow-hidden absolute">
           <img
             class="h-full w-full object-cover object-center"
-            src="https://placekitten.com/1000/750"
+            src="https://picsum.photos/1000/750"
             alt=""
           />
         </div>
@@ -34,7 +34,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
       <div className="h-full w-full overflow-hidden absolute">
         <img
           className="h-full w-full object-cover object-center"
-          src="https://placekitten.com/1000/750"
+          src="https://picsum.photos/1000/750"
           alt=""
         />
       </div>
@@ -62,7 +62,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
     ```html
     <div class="hero basefont-23 relative h-full max-h-500">
         <div class="h-full w-full overflow-hidden relative max-h-500">
-          <img class="h-full w-full object-cover object-center" src="https://placekitten.com/1000/750" alt="" />
+          <img class="h-full w-full object-cover object-center" src="https://picsum.photos/1000/750" alt="" />
         </div>
         <div class="card block max-w-600 basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow relative max-w-full md:max-w-600 md:absolute md:top-auto md:left-36 md:bottom-36">
           <div class="flex flex-col card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
@@ -72,7 +72,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
             <a class="cta-button font-regular leading-display block w-fit no-underline hover:underline focus:underline group transition-colors px-26 pt-10 pb-11 text-16 md:text-20 bg-digital-red hocus:bg-archway-dark text-white hocus:text-white border-2 border-digital-red border-solid hover:border-black focus:border-black rs-mt-neg1" href="https://decanter.stanford.edu">
               <span>Learn more</span>
               <span class="sr-only">about Decanter</span>
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="transition h-09em w-09em ml-5 -mt-2 inline-block transition-transform group-hocus:transform group-hocus:translate-x-02em" type="solid">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="transition h-09em w-09em ml-5 -mt-2 inline-block transition-transform group-hocus:transform group-hocus:translate-x-02em" type="solid">
                 <path fill-rule="evenodd"
                   d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                   clip-rule="evenodd"></path>
@@ -84,7 +84,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
     ```
     <div className="hero basefont-23 relative h-full max-h-500">
       <div className="h-full w-full overflow-hidden relative max-h-500">
-        <img className="h-full w-full object-cover object-center" src="https://placekitten.com/1000/750" alt="" />
+        <img className="h-full w-full object-cover object-center" src="https://picsum.photos/1000/750" alt="" />
       </div>
       <div className="card block max-w-600 basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow relative max-w-full md:max-w-600 md:absolute md:top-auto md:left-36 md:bottom-36">
         <div className="flex flex-col card-body items-start rs-px-2 rs-pt-2 rs-pb-4">
@@ -95,9 +95,9 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
             <span>Learn more</span>
             <span className="sr-only">about Decanter</span>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" className="transition h-09em w-09em ml-5 -mt-2 inline-block transition-transform group-hocus:transform group-hocus:translate-x-02em" type="solid">
-              <path fill-rule="evenodd"
+              <path fillRule="evenodd"
                 d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                clip-rule="evenodd"></path>
+                clipRule="evenodd"></path>
             </svg>
           </a>
         </div>
diff --git a/content/examples/identity-bar.mdx b/content/examples/identity-bar.mdx
index 5af7d5e..6696293 100644
--- a/content/examples/identity-bar.mdx
+++ b/content/examples/identity-bar.mdx
@@ -50,8 +50,8 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
       </div>
     ```
     <div className="rs-mb-5 bg-black-90 p-5">
-      <div class="px-20 sm:px-30 md:px-50 lg:px-30 pt-5 pb-1 bg-white">
-        <a class="logo hocus:no-underline text-cardinal-red hocus:text-cardinal-red text-20 leading-none" href="https://www.stanford.edu">Stanford University</a>
+      <div className="px-20 sm:px-30 md:px-50 lg:px-30 pt-5 pb-1 bg-white">
+        <a className="logo hocus:no-underline text-cardinal-red hocus:text-cardinal-red text-20 leading-none" href="https://www.stanford.edu">Stanford University</a>
       </div>
     </div>
   </Section>
diff --git a/content/examples/layout.mdx b/content/examples/layout.mdx
index 8de9e1f..1279546 100644
--- a/content/examples/layout.mdx
+++ b/content/examples/layout.mdx
@@ -9,11 +9,11 @@ lastUpdatedDate: 2022-05-17T12:00:00.000Z
 
 <Section heading="Page layout example:" width="full" className="max-w-1200">
   ```html
-  <div className="grid md:grid-cols-4 grid-gap">
-    <header className="md:col-span-4">Header</header>
+  <div class="grid md:grid-cols-4 grid-gap">
+    <header class="md:col-span-4">Header</header>
     <aside>Sidebar</aside>
-    <main className="md:col-span-3">Main Content</main>
-    <footer className="md:col-span-4">Footer</footer>
+    <main class="md:col-span-3">Main Content</main>
+    <footer class="md:col-span-4">Footer</footer>
   </div>
   ```
   <div className="grid md:grid-cols-4 grid-gap">
diff --git a/content/examples/logo.mdx b/content/examples/logo.mdx
index 403abd9..d4da5ca 100644
--- a/content/examples/logo.mdx
+++ b/content/examples/logo.mdx
@@ -4,15 +4,15 @@ lastUpdatedDate: 2023-05-01T12:00:00.000Z
 ---
 <Section heading="Default" width="full" className="max-w-1200">
   ```html
-  <div className="logo text-cardinal-red">Stanford</div>
+  <div class="logo text-cardinal-red">Stanford</div>
   ```
   <div className="logo text-cardinal-red">Stanford</div>
 </Section>
 
 <Section heading="Stacked" width="full" className="max-w-1200">
   ```html
-  <div className="bg-digital-red rs-p-2">
-    <a href="https://www.stanford.edu" className="logo hocus:no-underline text-white hocus:text-white type-3">
+  <div class="bg-digital-red rs-p-2">
+    <a href="https://www.stanford.edu" class="logo hocus:no-underline text-white hocus:text-white type-3">
       Stanford <br/> University
     </a>
   </div>
@@ -25,8 +25,8 @@ lastUpdatedDate: 2023-05-01T12:00:00.000Z
 
 <Section heading="Full" width="full" className="max-w-1200">
   ```html
-  <div className="bg-digital-red rs-p-2">
-    <a className="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
+  <div class="bg-digital-red rs-p-2">
+    <a class="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
       Stanford University
     </a>
   </div>
@@ -40,8 +40,8 @@ lastUpdatedDate: 2023-05-01T12:00:00.000Z
 
 <Section heading="Short" width="full" className="max-w-1200">
   ```html
-  <div className="bg-digital-red rs-p-2">
-    <a className="logo hocus:no-underline text-white hocus:text-white" href="https://www.stanford.edu">Stanford</a>
+  <div class="bg-digital-red rs-p-2">
+    <a class="logo hocus:no-underline text-white hocus:text-white" href="https://www.stanford.edu">Stanford</a>
   </div>
   ```
 
diff --git a/content/examples/modular-typography.mdx b/content/examples/modular-typography.mdx
index 1526ca2..609cb72 100644
--- a/content/examples/modular-typography.mdx
+++ b/content/examples/modular-typography.mdx
@@ -4,7 +4,7 @@ lastUpdatedDate: 2023-05-15T12:00:00.000Z
 ---
 <Section heading="Default Headings (type-0)" width="full" className="max-w-1200">
   ```html
-    <div className="type-0">
+    <div class="type-0">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
@@ -27,7 +27,7 @@ lastUpdatedDate: 2023-05-15T12:00:00.000Z
 
 <Section heading="type-1" width="full" className="max-w-1200">
   ```html
-  <div className="type-1">
+  <div class="type-1">
     <h1>Heading 1</h1>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
@@ -50,7 +50,7 @@ lastUpdatedDate: 2023-05-15T12:00:00.000Z
 
 <Section heading="type-2" width="full" className="max-w-1200">
   ```html
-  <div className="type-2">
+  <div class="type-2">
     <h1>Heading 1</h1>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
@@ -73,7 +73,7 @@ lastUpdatedDate: 2023-05-15T12:00:00.000Z
 
 <Section heading="type-3" width="full" className="max-w-1200">
   ```html
-  <div className="type-3">
+  <div class="type-3">
     <h1>Heading 1</h1>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
@@ -97,8 +97,8 @@ lastUpdatedDate: 2023-05-15T12:00:00.000Z
 
 <Section heading="type-1 with a modified basefont (basefont-19)" width="full" className="max-w-1200">
   ```html
-  <div className="basefont-19">
-    <div className="type-1">
+  <div class="basefont-19">
+    <div class="type-1">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>
@@ -126,8 +126,8 @@ lastUpdatedDate: 2023-05-15T12:00:00.000Z
 
 <Section heading="type-1 with a modified basefont (basefont-23)" width="full" className="max-w-1200">
   ```html
-  <div className="basefont-23">
-    <div className="type-1">
+  <div class="basefont-23">
+    <div class="type-1">
       <h1>Heading 1</h1>
       <h2>Heading 2</h2>
       <h3>Heading 3</h3>