diff --git a/docs/components/alert.md b/docs/components/alert.md
index 8d97b0cce..3e2d0b800 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -227,7 +227,7 @@ const App = () => {
 
   return (
     <>
-      <div class="alert-duration">
+      <div className="alert-duration">
         <SlButton type="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
 
         <SlAlert 
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
index 43e2efc5c..5191aa71e 100644
--- a/docs/components/avatar.md
+++ b/docs/components/avatar.md
@@ -154,7 +154,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="avatar-group">
+    <div className="avatar-group">
       <SlAvatar image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right" />
       <SlAvatar image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />
       <SlAvatar image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />
diff --git a/docs/components/badge.md b/docs/components/badge.md
index 015f15781..a8634dcc7 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -101,7 +101,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="badge-pulse">
+    <div className="badge-pulse">
       <SlBadge type="primary" pill pulse>1</SlBadge>
       <SlBadge type="success" pill pulse>1</SlBadge>
       <SlBadge type="neutral" pill pulse>1</SlBadge>
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index c285494a0..7b9b4fdc3 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -427,7 +427,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="button-group-toolbar">
+    <div className="button-group-toolbar">
       <SlButtonGroup label="History">
         <SlTooltip content="Undo">
           <SlButton><SlIcon name="arrow-counterclockwise"></SlIcon></SlButton>
diff --git a/docs/components/card.md b/docs/components/card.md
index c4989deb2..d10fb1e52 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -64,7 +64,7 @@ const css = `
 
 const App = () => (
   <>
-    <SlCard class="card-overview">
+    <SlCard className="card-overview">
       <img 
         slot="image" 
         src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" 
@@ -115,7 +115,7 @@ const css = `
 
 const App = () => (
   <>
-    <SlCard class="card-basic">
+    <SlCard className="card-basic">
       This is just a basic card. No image, no header, and no footer. Just your content.
     </SlCard>
 
@@ -185,7 +185,7 @@ const css = `
 
 const App = () => (
   <>
-    <SlCard class="card-header">
+    <SlCard className="card-header">
       <div slot="header">
         Header Title
 
@@ -248,7 +248,7 @@ const css = `
 
 const App = () => (
   <>
-    <SlCard class="card-footer">
+    <SlCard className="card-footer">
       This card has a footer. You can put all sorts of things in it!
 
       <div slot="footer">
@@ -294,7 +294,7 @@ const css = `
 
 const App = () => (
   <>
-    <SlCard class="card-image">
+    <SlCard className="card-image">
       <img 
         slot="image" 
         src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80" 
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
index a869d7acf..ed196537c 100644
--- a/docs/components/drawer.md
+++ b/docs/components/drawer.md
@@ -244,7 +244,6 @@ const App = () => {
         <SlDrawer
           label="Drawer" 
           contained 
-          class="drawer-contained" 
           open={open} 
           onSlAfterHide={() => setOpen(false)}
           style={{ '--size': '50%' }}
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 97dc6215d..3749973ca 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -361,7 +361,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="dropdown-hoist">
+    <div className="dropdown-hoist">
       <SlDropdown>
         <SlButton slot="trigger" caret>No Hoist</SlButton>
         <SlMenu>
diff --git a/docs/components/format-number.md b/docs/components/format-number.md
index ae5d6c093..6b9f9847d 100644
--- a/docs/components/format-number.md
+++ b/docs/components/format-number.md
@@ -30,7 +30,7 @@ const App = () => {
   const [value, setValue] = useState(1000);
 
   return (
-    <div class="format-number-overview">
+    <>
       <SlFormatNumber value={value} />
       <br /><br />
       <SlInput 
@@ -40,7 +40,7 @@ const App = () => {
         style={{ maxWidth: '180px' }}
         onSlInput={event => setValue(event.target.value)}
       />
-    </div>
+    </>
   );
 };
 ```
diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index 26472158a..137dc5242 100644
--- a/docs/components/icon-button.md
+++ b/docs/components/icon-button.md
@@ -88,7 +88,7 @@ const css = `
 `;
 
 const App = () => (
-  <div class="icon-button-color">
+  <div className="icon-button-color">
     <SlIconButton name="type-bold" label="Bold" />
     <SlIconButton name="type-italic" label="Italic" />
     <SlIconButton name="type-underline" label="Underline" />
diff --git a/docs/components/mutation-observer.md b/docs/components/mutation-observer.md
index 258803bcb..40fc8c02d 100644
--- a/docs/components/mutation-observer.md
+++ b/docs/components/mutation-observer.md
@@ -170,12 +170,12 @@ const App = () => {
 
   return (
     <>
-      <div class="mutation-child-list">
+      <div className="mutation-child-list">
         <SlMutationObserver 
           child-list 
           onSlMutation={event => console.log(event.detail)}
         >
-          <div class="buttons">
+          <div className="buttons">
             <SlButton type="primary" onClick={addButton}>Add button</SlButton>
             {buttonIds.map(id => (
               <SlButton key={id} type="default" onClick={() => removeButton(id)}>
diff --git a/docs/components/qr-code.md b/docs/components/qr-code.md
index 6331c386a..95f121232 100644
--- a/docs/components/qr-code.md
+++ b/docs/components/qr-code.md
@@ -53,7 +53,7 @@ const App = () => {
 
   return (
     <>
-      <div class="qr-overview">
+      <div className="qr-overview">
         <SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
         <br />
 
@@ -151,7 +151,7 @@ const css = `
 const App = () => {
   return (
     <>
-      <div class="qr-error-correction">
+      <div className="qr-error-correction">
         <SlQrCode value="https://shoelace.style/" error-correction="L" />
         <SlQrCode value="https://shoelace.style/" error-correction="M" />
         <SlQrCode value="https://shoelace.style/" error-correction="Q" />
diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md
index 19f4f56c9..bdf7dc098 100644
--- a/docs/components/skeleton.md
+++ b/docs/components/skeleton.md
@@ -92,7 +92,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="skeleton-overview">
+    <div className="skeleton-overview">
       <header>
         <SlSkeleton />
         <SlSkeleton />
@@ -152,7 +152,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="skeleton-effects">
+    <div className="skeleton-effects">
       <SlSkeleton effect="none" />
       None
 
@@ -223,7 +223,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="skeleton-paragraphs">
+    <div className="skeleton-paragraphs">
       <SlSkeleton />
       <SlSkeleton />
       <SlSkeleton />
@@ -287,7 +287,7 @@ const css = `
 
 const App = () => (
   <>
-    <div class="skeleton-avatars">
+    <div className="skeleton-avatars">
       <SlSkeleton />
       <SlSkeleton />
       <SlSkeleton />
@@ -387,12 +387,12 @@ const css = `
 
 const App = () => (
   <>
-  <div class="skeleton-shapes">
-    <SlSkeleton class="square" />
-    <SlSkeleton class="circle" />
-    <SlSkeleton class="triangle" />
-    <SlSkeleton class="cross" />
-    <SlSkeleton class="comment" />
+  <div className="skeleton-shapes">
+    <SlSkeleton className="square" />
+    <SlSkeleton className="circle" />
+    <SlSkeleton className="triangle" />
+    <SlSkeleton className="cross" />
+    <SlSkeleton className="comment" />
   </div>
 
     <style>{css}</style>
diff --git a/docs/components/tab-group.md b/docs/components/tab-group.md
index 8b489c632..e29d9df75 100644
--- a/docs/components/tab-group.md
+++ b/docs/components/tab-group.md
@@ -205,7 +205,7 @@ const App = () => {
   }
 
   return (
-    <SlTabGroup class="tabs-closable" onSlClose={handleClose}>
+    <SlTabGroup className="tabs-closable" onSlClose={handleClose}>
       <SlTab slot="nav" panel="general">General</SlTab>
       <SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>Closable 1</SlTab>
       <SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>Closable 2</SlTab>
diff --git a/docs/components/tag.md b/docs/components/tag.md
index 65f5cc5ac..1ba69fbec 100644
--- a/docs/components/tag.md
+++ b/docs/components/tag.md
@@ -119,7 +119,7 @@ const App = () => {
 
   return (
     <>
-      <div class="tags-removable">
+      <div className="tags-removable">
         <SlTag size="small" removable onSlRemove={handleRemove}>
           Small
         </SlTag>