From 70417c22f6840ec730cef2804001a384fcbbfbba Mon Sep 17 00:00:00 2001
From: jdwjdwjdw <jacobdeanwilson@gmail.com>
Date: Wed, 29 May 2024 10:14:23 -0700
Subject: [PATCH] JSX vs HTML fixups

---
 content/examples/alerts.mdx        |  8 +--
 content/examples/cards.mdx         | 96 +++++++++++++++---------------
 content/examples/grid-css-grid.mdx | 20 +++----
 content/examples/grid-flex.mdx     | 20 +++----
 content/examples/heros.mdx         |  6 +-
 content/examples/identity-bar.mdx  | 16 ++---
 6 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/content/examples/alerts.mdx b/content/examples/alerts.mdx
index bacb6b4..230057c 100644
--- a/content/examples/alerts.mdx
+++ b/content/examples/alerts.mdx
@@ -12,12 +12,12 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" height="20" 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"
-                clipRule="evenodd"></path>
+                clip-rule="evenodd"></path>
             </svg></button></div>
         <h2 class="order-1 mb-15 md:mb-0 flex flex-shrink rs-mr-1 w-full md:w-max"><span class="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 strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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></span><span class="inline-block uppercase font-bold text-17 tracking-widest">Information:</span></h2>
@@ -75,7 +75,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
               width="20" className="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"
-                clipRule="evenodd"></path>
+                clip-rule="evenodd"></path>
             </svg>
           </button>
         </div>
@@ -84,7 +84,7 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
                 width="20" class="su-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"
-                  clipRule="evenodd"></path>
+                  clip-rule="evenodd"></path>
               </svg></span><span class="inline-block uppercase font-bold text-17 tracking-widest">Info:</span></h2>
           <div class="order-2 flex-1 flex-grow w-full">
             <div class="text-normal">
diff --git a/content/examples/cards.mdx b/content/examples/cards.mdx
index 5cf85d7..320f880 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">
+                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 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>
-          <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>
@@ -200,16 +200,16 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
   </Section>
   <Section heading="Library Card" width="full">
   ```html
-  <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">
+  <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">
       <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 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 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>
-        <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>
+        <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>
       </div>
-      <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>
+      <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>
     </div>
   </div>
   ```
diff --git a/content/examples/grid-css-grid.mdx b/content/examples/grid-css-grid.mdx
index 2f3d908..eee0edb 100644
--- a/content/examples/grid-css-grid.mdx
+++ b/content/examples/grid-css-grid.mdx
@@ -6,30 +6,30 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
 <div className="lg:max-w-600 xl:max-w-800 2xl:max-w-1000">
   <Section heading="CSS Grid" width="full">
     ```html
-    <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">
+    <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">
           1
         </div>
-        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           2
         </div>
-        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           3
         </div>
-        <div className="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div class="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
           4
         </div>
-        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           5
         </div>
-        <div className="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div class="bg-sky-light flex justify-center items-center rs-p-3 type-3 font-bold">
           6
         </div>
-        <div className="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div class="col-span-2 bg-sky-dark text-white flex justify-center items-center rs-p-3 type-3 font-bold">
           7
         </div>
-        <div className="col-span-3 bg-sky text-white flex justify-center items-center rs-p-3 type-3 font-bold">
+        <div class="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/grid-flex.mdx b/content/examples/grid-flex.mdx
index eb478d0..39f48d4 100644
--- a/content/examples/grid-flex.mdx
+++ b/content/examples/grid-flex.mdx
@@ -6,27 +6,27 @@ lastUpdatedDate: 2023-05-25T12:00:00.000Z
 <div className="lg:max-w-600 xl:max-w-800 2xl:max-w-1000">
   <Section heading="Flex Box" width="full">
     ```html
-    <div className="flex flex-col md:flex-row gap-xs lg:gap-lg xl:gap-xl 2xl:gap-2xl text-white rs-mb-2">
-      <div className="w-full md:w-1/2 bg-palo-verde-light rs-p-2">
+    <div class="flex flex-col md:flex-row gap-xs lg:gap-lg xl:gap-xl 2xl:gap-2xl text-white rs-mb-2">
+      <div class="w-full md:w-1/2 bg-palo-verde-light rs-p-2">
         <h3>6 of 12 columns</h3>
-        <p className="card-paragraph">This column stacks vertically for XS-SM breakpoints and spans 6 of 12
+        <p class="card-paragraph">This column stacks vertically for XS-SM breakpoints and spans 6 of 12
           columns for MD and up; responsive grid gaps.</p>
       </div>
-      <div className="w-full md:w-1/2 bg-palo-verde-dark rs-p-2">
+      <div class="w-full md:w-1/2 bg-palo-verde-dark rs-p-2">
         <h3>6 of 12 columns</h3>
-        <p className="card-paragraph">This column stacks vertically for XS-SM breakpoints and spans 6 of 12
+        <p class="card-paragraph">This column stacks vertically for XS-SM breakpoints and spans 6 of 12
           columns for MD and up; responsive grid gaps.</p>
       </div>
     </div>
-    <div className="flex flex-col sm:flex-row grid-gap rs-mb-2 text-white">
-      <div className="w-full sm:w-1/2 lg:w-3/4 bg-spirited rs-p-2">
+    <div class="flex flex-col sm:flex-row grid-gap rs-mb-2 text-white">
+      <div class="w-full sm:w-1/2 lg:w-3/4 bg-spirited rs-p-2">
         <h3>8 of 12 columns</h3>
-        <p className="card-paragraph">This column stacks vertically for XS breakpoint; spans 6 of 12 columns for
+        <p class="card-paragraph">This column stacks vertically for XS breakpoint; spans 6 of 12 columns for
           SM-MD; spans 8 of 12 columns for LG and up; responsive column gaps using .grid-gap class.</p>
       </div>
-      <div className="w-full sm:w-1/2 lg:w-1/4 bg-spirited-dark rs-p-2">
+      <div class="w-full sm:w-1/2 lg:w-1/4 bg-spirited-dark rs-p-2">
         <h3>4 of 12 columns</h3>
-        <p className="card-paragraph">This column stacks vertically for XS breakpoint; spans 6 of 12 columns for
+        <p class="card-paragraph">This column stacks vertically for XS breakpoint; spans 6 of 12 columns for
           SM-MD; spans 4 of 12 columns for LG and up; responsive column gaps using .grid-gap class.</p>
       </div>
     </div>
diff --git a/content/examples/heros.mdx b/content/examples/heros.mdx
index c3b15d8..eb0e271 100644
--- a/content/examples/heros.mdx
+++ b/content/examples/heros.mdx
@@ -72,10 +72,10 @@ 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">
-                <path fillRule="evenodd"
+              <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"
-                  clipRule="evenodd"></path>
+                  clip-rule="evenodd"></path>
               </svg>
             </a>
           </div>
diff --git a/content/examples/identity-bar.mdx b/content/examples/identity-bar.mdx
index 7349df3..6696293 100644
--- a/content/examples/identity-bar.mdx
+++ b/content/examples/identity-bar.mdx
@@ -6,8 +6,8 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
 
   <Section heading="Digital Red" width="full">
   ```html
-    <div className="pl-20 md:pl-30 pt-5 pb-1 bg-digital-red">
-      <a className="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
+    <div class="pl-20 md:pl-30 pt-5 pb-1 bg-digital-red">
+      <a class="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
         Stanford University
       </a>
     </div>
@@ -19,8 +19,8 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
 
   <Section heading="Cardinal Red" width="full">
     ```html
-      <div className="pl-20 md:pl-30 pt-5 pb-1 bg-cardinal-red">
-        <a className="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
+      <div class="pl-20 md:pl-30 pt-5 pb-1 bg-cardinal-red">
+        <a class="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
           Stanford University
         </a>
       </div>
@@ -32,8 +32,8 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
 
   <Section heading="Black" width="full">
     ```html
-      <div className="pl-20 md:pl-30 pt-5 pb-1 bg-black">
-        <a className="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
+      <div class="pl-20 md:pl-30 pt-5 pb-1 bg-black">
+        <a class="logo hocus:no-underline text-white hocus:text-white text-20 leading-none" href="https://www.stanford.edu">
           Stanford University
         </a>
       </div>
@@ -45,8 +45,8 @@ lastUpdatedDate: 2022-04-06T12:00:00.000Z
 
   <Section heading="White" width="full">
     ```html
-      <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 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>
     ```
     <div className="rs-mb-5 bg-black-90 p-5">