maverick-wave 4.28.0 → 5.0.0

package/src/partials/alerts-container.html

@@ -18,7 +18,7 @@
     <button
       type="button"
       class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      onclick="this.closest('.mw-alert').remove()"
+      aria-label="Dismiss System Update"
     >
       <i class="fas fa-times"></i>
     </button>
@@ -36,7 +36,7 @@
     <button
       type="button"
       class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      onclick="this.closest('.mw-alert').remove()"
+      aria-label="Dismiss Notification"
     >
       <i class="fas fa-times"></i>
     </button>
@@ -54,7 +54,7 @@
     <button
       type="button"
       class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      onclick="this.closest('.mw-alert').remove()"
+      aria-label="Dismiss Profile Updated"
     >
       <i class="fas fa-times"></i>
     </button>
@@ -75,7 +75,7 @@
     <button
       type="button"
       class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      onclick="this.closest('.mw-alert').remove()"
+      aria-label="Dismiss Storage Low"
     >
       <i class="fas fa-times"></i>
     </button>
@@ -96,7 +96,7 @@
     <button
       type="button"
       class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      onclick="this.closest('.mw-alert').remove()"
+      aria-label="Dismiss Connection Failed"
     >
       <i class="fas fa-times"></i>
     </button>
@@ -117,7 +117,7 @@
     <button
       type="button"
       class="mw-btn-mini mw-btn-mini-danger mw-alert-close"
-      onclick="this.closest('.mw-alert').remove()"
+      aria-label="Dismiss Did you know?"
     >
       <i class="fas fa-times"></i>
     </button>

package/src/partials/announcement-container.html

@@ -12,10 +12,10 @@
 
 <div class="mw-grid-1 mw-gap-6">
   <div>
-    <h5 class="mw-text-medium mw-mb-2">
+    <h4 class="mw-text-medium mw-mb-2">
       Default (primary) with highlight pill - over content, showing the 75%
       surface and the blur
-    </h5>
+    </h4>
     <div
       style="
         background: url('images/slider-mountains.svg') center / cover;
@@ -32,7 +32,7 @@
   </div>
 
   <div>
-    <h5 class="mw-text-medium mw-mb-2">Secondary</h5>
+    <h4 class="mw-text-medium mw-mb-2">Secondary</h4>
     <aside
       class="mw-announcement mw-announcement-secondary mw-announcement-static"
     >
@@ -44,7 +44,7 @@
   </div>
 
   <div>
-    <h5 class="mw-text-medium mw-mb-2">Warning, without a link</h5>
+    <h4 class="mw-text-medium mw-mb-2">Warning, without a link</h4>
     <aside
       class="mw-announcement mw-announcement-warning mw-announcement-static"
     >
@@ -55,7 +55,7 @@
   </div>
 
   <div>
-    <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+    <h4 class="mw-text-medium mw-mb-2">Danger</h4>
     <aside
       class="mw-announcement mw-announcement-danger mw-announcement-static"
     >

package/src/partials/avatars-container.html

@@ -11,19 +11,39 @@
     <div class="mw-card mw-card-simple">
       <div class="mw-grid-stack-center">
         <div class="mw-avatar mw-avatar-xs">
-          <img src="https://i.pravatar.cc/150?img=1" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=1"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-sm">
-          <img src="https://i.pravatar.cc/150?img=2" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=2"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar">
-          <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=3"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-lg">
-          <img src="https://i.pravatar.cc/150?img=4" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=4"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-xl">
-          <img src="https://i.pravatar.cc/150?img=5" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=5"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
       </div>
     </div>
@@ -35,37 +55,69 @@
       <h4 class="mw-mb-2">Avatar Shapes</h4>
       <div>
         <div class="mw-avatar">
-          <img src="https://i.pravatar.cc/150?img=6" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=6"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-square">
-          <img src="https://i.pravatar.cc/150?img=7" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=7"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
       </div>
 
       <h4 class="mw-mb-2 mw-mt-4">Avatar Colors</h4>
       <div>
         <div class="mw-avatar mw-avatar-primary">
-          <img src="https://i.pravatar.cc/150?img=9" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=9"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-secondary">
-          <img src="https://i.pravatar.cc/150?img=10" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=10"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
       </div>
       <div>
         <div class="mw-avatar mw-avatar-success">
-          <img src="https://i.pravatar.cc/150?img=11" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=11"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
 
         <div class="mw-avatar mw-avatar-warning">
-          <img src="https://i.pravatar.cc/150?img=12" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=12"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
 
         <div class="mw-avatar mw-avatar-danger">
-          <img src="https://i.pravatar.cc/150?img=13" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=13"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
 
         <div class="mw-avatar">
-          <img src="https://i.pravatar.cc/150?img=14" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=14"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
       </div>
 
@@ -94,16 +146,32 @@
       <h4 class="mw-mb-2 mw-mt-4">Avatar Group</h4>
       <div class="mw-avatar-group mw-mt-3 mw-mb-5">
         <div class="mw-avatar mw-avatar-sm">
-          <img src="https://i.pravatar.cc/150?img=19" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=19"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-sm">
-          <img src="https://i.pravatar.cc/150?img=20" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=20"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-sm">
-          <img src="https://i.pravatar.cc/150?img=21" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=21"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-avatar mw-avatar-sm">
-          <img src="https://i.pravatar.cc/150?img=22" alt="Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=22"
+            alt="Avatar"
+            loading="lazy"
+          />
         </div>
       </div>
     </div>

package/src/partials/badges-container.html

@@ -12,7 +12,7 @@
     <h3 class="mw-card-title mw-mb-4">Counts</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Colors</h5>
+        <h4 class="mw-text-medium mw-mb-2">Colors</h4>
         <div class="mw-d-flex mw-items-center mw-gap-3 mw-flex-wrap">
           <span class="mw-badge">3</span>
           <span class="mw-badge mw-badge-secondary">8</span>
@@ -25,7 +25,7 @@
         </div>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Sizes</h5>
+        <h4 class="mw-text-medium mw-mb-2">Sizes</h4>
         <div class="mw-d-flex mw-items-center mw-gap-3">
           <span class="mw-badge mw-badge-sm">7</span>
           <span class="mw-badge">7</span>
@@ -39,7 +39,7 @@
         </p>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Anchored to something</h5>
+        <h4 class="mw-text-medium mw-mb-2">Anchored to something</h4>
         <div class="mw-d-flex mw-items-center mw-gap-6">
           <span class="mw-badge-anchor">
             <button class="mw-btn mw-btn-outline">
@@ -68,7 +68,7 @@
     <h3 class="mw-card-title mw-mb-4">Status</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Dot with a label</h5>
+        <h4 class="mw-text-medium mw-mb-2">Dot with a label</h4>
         <div class="mw-grid-1 mw-gap-3">
           <span class="mw-badge-status mw-badge-status-success">
             <span class="mw-badge-dot"></span> Online
@@ -85,7 +85,7 @@
         </div>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Live</h5>
+        <h4 class="mw-text-medium mw-mb-2">Live</h4>
         <p class="mw-text-muted mw-text-sm mw-mb-0">
           <code>mw-badge-pulse</code> adds a ring that grows out and fades. The
           dot underneath never moves, so a column of them in a table stays
@@ -94,7 +94,7 @@
         </p>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">In a row</h5>
+        <h4 class="mw-text-medium mw-mb-2">In a row</h4>
         <div class="mw-row-split mw-row-split-center">
           <span>Deployment #4812</span>
           <span class="mw-badge-status mw-badge-status-success">

package/src/partials/blog-posts-container.html

@@ -21,7 +21,7 @@
       </div>
       <div class="mw-blog-post-meta-item">
         <i class="far fa-user"></i>
-        <span>By Sarah Johnson</span>
+        <span>By Nadia Kern</span>
       </div>
       <div class="mw-blog-post-meta-item">
         <i class="far fa-clock"></i>
@@ -34,6 +34,7 @@
     src="https://images.unsplash.com/photo-1603969072881-b0fc7f3d77d7?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     alt="UI/UX design"
     class="mw-blog-post-featured-image"
+    loading="lazy"
   />
 
   <div class="mw-blog-post-content-markdown">
@@ -58,16 +59,15 @@
     </p>
 
     <blockquote>
-      "AI hasn't replaced developers; it has elevated them. We now spend more
-      time on architecture and problem-solving rather than writing boilerplate
-      code." - Elena Vega, Lead Developer at TechFront
+      "AI did not replace us. It took the boilerplate, and left the part where
+      you decide what the thing should do." - Elena Vega, Lead Developer at
+      TechFront
     </blockquote>
 
     <h3>Serverless Architecture: Beyond the Basics</h3>
     <p>
-      Serverless computing has matured significantly, moving beyond simple
-      function execution to comprehensive application architectures. The new
-      generation of serverless platforms offers:
+      Serverless has grown past single functions. Whole applications now run on
+      it, and the current generation of platforms offers:
     </p>
 
     <ul>
@@ -136,12 +136,11 @@ export async function handler(event, context) {
       </li>
     </ul>
 
-    <h3>Conclusion</h3>
+    <h3>What this means for the next project</h3>
     <p>
-      As we move further into 2025, the web development landscape continues to
-      prioritize developer experience, performance, and scalability. By
-      embracing these modern techniques, developers can create more robust,
-      efficient, and maintainable applications.
+      None of this is exotic any more. The tooling ships with the framework, the
+      runtimes are on every major host, and the cost of trying one of them on a
+      real feature is an afternoon.
     </p>
   </div>
 

package/src/partials/buttons-container.html

@@ -40,7 +40,7 @@
     <h3 class="mw-mb-4">Ghost, Icon &amp; Block</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Ghost</h5>
+        <h4 class="mw-text-medium mw-mb-2">Ghost</h4>
         <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
           <button type="button" class="mw-btn mw-btn-ghost">Rename</button>
           <button type="button" class="mw-btn mw-btn-ghost mw-active">
@@ -59,7 +59,7 @@
         </p>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Icon only</h5>
+        <h4 class="mw-text-medium mw-mb-2">Icon only</h4>
         <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
           <button
             type="button"
@@ -103,7 +103,7 @@
         </p>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Block</h5>
+        <h4 class="mw-text-medium mw-mb-2">Block</h4>
         <button type="button" class="mw-btn mw-btn-primary mw-btn-block">
           Sign in
         </button>

package/src/partials/cards-container.html

@@ -12,6 +12,7 @@
       <img
         src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
         alt="Tech Image"
+        loading="lazy"
       />
     </div>
     <div class="mw-card-body">
@@ -120,7 +121,11 @@
     <div class="mw-card-body">
       <h3 class="mw-card-title">
         <span class="mw-card-title-icon mw-card-title-icon-lg">
-          <img src="https://m1well.com/images/header_logo.svg" alt="" />
+          <img
+            src="https://m1well.com/images/header_logo.svg"
+            alt=""
+            loading="lazy"
+          />
         </span>
         A logo instead of an icon
       </h3>
@@ -141,7 +146,7 @@
       <div class="mw-card-stack-icon">
         <i class="fas fa-laptop-code"></i>
       </div>
-      <h5 class="mw-card-stack-title">Frontend</h5>
+      <h4 class="mw-card-stack-title">Frontend</h4>
     </div>
     <div class="mw-card-stack-body">
       <div class="mw-tags">
@@ -161,7 +166,7 @@
       <div class="mw-card-stack-icon">
         <i class="fas fa-server"></i>
       </div>
-      <h5 class="mw-card-stack-title">Backend</h5>
+      <h4 class="mw-card-stack-title">Backend</h4>
     </div>
     <div class="mw-card-stack-body">
       <div class="mw-tags">
@@ -181,7 +186,7 @@
       <div class="mw-card-stack-icon">
         <i class="fas fa-database"></i>
       </div>
-      <h5 class="mw-card-stack-title">Data Storage</h5>
+      <h4 class="mw-card-stack-title">Data Storage</h4>
     </div>
     <div class="mw-card-stack-body">
       <div class="mw-tags">
@@ -201,7 +206,7 @@
       <div class="mw-card-stack-icon">
         <i class="fas fa-cloud"></i>
       </div>
-      <h5 class="mw-card-stack-title">DevOps & Cloud</h5>
+      <h4 class="mw-card-stack-title">DevOps & Cloud</h4>
     </div>
     <div class="mw-card-stack-body">
       <div class="mw-tags">
@@ -221,7 +226,7 @@
       <div class="mw-card-stack-icon">
         <i class="fas fa-vial"></i>
       </div>
-      <h5 class="mw-card-stack-title">Testing & Quality</h5>
+      <h4 class="mw-card-stack-title">Testing & Quality</h4>
     </div>
     <div class="mw-card-stack-body">
       <p class="mw-card-stack-text">
@@ -250,6 +255,7 @@
       <img
         src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
         alt="Mountain Scenery Portrait"
+        loading="lazy"
       />
     </div>
     <div class="mw-card-body">
@@ -274,6 +280,7 @@
       <img
         src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
         alt="Team Member Portrait"
+        loading="lazy"
       />
     </div>
     <div class="mw-card-body">
@@ -304,6 +311,7 @@
       <img
         src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
         alt="Portrait Style Image"
+        loading="lazy"
       />
     </div>
     <div class="mw-card-body">
@@ -330,6 +338,7 @@
       <img
         src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
         alt="Portrait Style Image"
+        loading="lazy"
       />
     </div>
     <div class="mw-card-body">
@@ -418,10 +427,14 @@
       <hr class="mw-card-title-divider" />
       <div class="mw-d-flex mw-items-center mw-gap-3 mw-mb-3">
         <div class="mw-avatar">
-          <img src="https://i.pravatar.cc/150?img=32" alt="User Avatar" />
+          <img
+            src="https://i.pravatar.cc/150?img=32"
+            alt="User Avatar"
+            loading="lazy"
+          />
         </div>
         <div class="mw-flex-grow-1 mw-ml-1">
-          <p class="mw-mb-0"><strong>Sarah Johnson</strong></p>
+          <p class="mw-mb-0"><strong>Nadia Kern</strong></p>
           <p class="mw-text-muted mw-mb-0">Product Designer</p>
         </div>
       </div>
@@ -479,7 +492,7 @@
           <h3 class="mw-card-title">Latest Gadget</h3>
           <hr class="mw-card-title-divider" />
           <p class="mw-card-text">
-            Introducing our brand‐new gadget with cutting-edge features.
+            The one we spent two years on. It is finally ready.
           </p>
           <div class="mw-card-footer">
             <button type="button" class="mw-btn mw-btn-primary">Explore</button>
@@ -493,6 +506,7 @@
           <img
             src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
             alt="Profile"
+            loading="lazy"
           />
         </div>
         <div class="mw-card-body">
@@ -513,6 +527,7 @@
           <img
             src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
             alt="Sale"
+            loading="lazy"
           />
         </div>
         <div class="mw-card-body">
@@ -558,6 +573,7 @@
           <img
             src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
             alt="Product Spotlight"
+            loading="lazy"
           />
         </div>
         <div class="mw-card-body">
@@ -596,6 +612,7 @@
           <img
             src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
             alt="Dashboard Beta"
+            loading="lazy"
           />
         </div>
         <div class="mw-card-body">

package/src/partials/code-container.html

@@ -92,7 +92,7 @@ function Counter() {
         <strong>does not include a built-in JavaScript library</strong>
         for automatically parsing code and applying these highlighting classes.
       </p>
-      <h5 class="mw-mt-4 mw-mb-2">Option 1: Manual Highlighting</h5>
+      <h4 class="mw-mt-4 mw-mb-2">Option 1: Manual Highlighting</h4>
       <p>
         For simple snippets, you can manually wrap parts of your code with
         <code>&lt;span&gt;</code> tags using the provided
@@ -111,9 +111,9 @@ function Counter() {
         </div>
       </div>
 
-      <h5 class="mw-mt-4 mw-mb-2">
+      <h4 class="mw-mt-4 mw-mb-2">
         Option 2: Using a Syntax Highlighting Library
-      </h5>
+      </h4>
       <p>
         For automatic highlighting of various languages, integrate a dedicated
         JavaScript library like
@@ -141,8 +141,8 @@ function Counter() {
         </li>
       </ol>
       <p>
-        Using an external library is recommended for robust, multi-language
-        syntax highlighting.
+        Use an external library for reliable, multi-language syntax
+        highlighting.
       </p>
     </div>
   </div>

package/src/partials/content-slider-container.html

@@ -7,21 +7,22 @@
       src="images/slider-mountains.svg"
       class="mw-image-slider-base-image"
       alt="Mountain Landscape"
+      loading="lazy"
     />
   </div>
 
   <div class="mw-image-slider-overlay">
     <div class="mw-image-slider-overlay-image" data-index="1">
-      <img src="images/slider-lake.svg" alt="Lake" />
+      <img src="images/slider-lake.svg" alt="Lake" loading="lazy" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="2">
-      <img src="images/slider-forest.svg" alt="Forest" />
+      <img src="images/slider-forest.svg" alt="Forest" loading="lazy" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="3">
-      <img src="images/slider-field.svg" alt="Field" />
+      <img src="images/slider-field.svg" alt="Field" loading="lazy" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="4">
-      <img src="images/slider-trees.svg" alt="Trees" />
+      <img src="images/slider-trees.svg" alt="Trees" loading="lazy" />
     </div>
   </div>
 

package/src/partials/divider-container.html

@@ -9,25 +9,25 @@
     <h3 class="mw-card-title mw-mb-4">Horizontal</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Default</h5>
+        <h4 class="mw-text-medium mw-mb-2">Default</h4>
         <p class="mw-text-muted">Content above</p>
         <hr class="mw-divider" />
         <p class="mw-text-muted">Content below</p>
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Thick</h5>
+        <h4 class="mw-text-medium mw-mb-2">Thick</h4>
         <hr class="mw-divider mw-divider-thick" />
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Dashed</h5>
+        <h4 class="mw-text-medium mw-mb-2">Dashed</h4>
         <hr class="mw-divider mw-divider-dashed" />
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Primary color</h5>
+        <h4 class="mw-text-medium mw-mb-2">Primary color</h4>
         <hr class="mw-divider mw-divider-primary" />
       </div>
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Secondary color</h5>
+        <h4 class="mw-text-medium mw-mb-2">Secondary color</h4>
         <hr class="mw-divider mw-divider-secondary" />
       </div>
     </div>
@@ -37,7 +37,7 @@
     <h3 class="mw-card-title mw-mb-4">With Text & Vertical</h3>
     <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
       <div>
-        <h5 class="mw-text-medium mw-mb-2">With label</h5>
+        <h4 class="mw-text-medium mw-mb-2">With label</h4>
         <div class="mw-divider-text">
           <span>or</span>
         </div>
@@ -54,7 +54,7 @@
       </div>
 
       <div>
-        <h5 class="mw-text-medium mw-mb-2">Vertical (inside flex row)</h5>
+        <h4 class="mw-text-medium mw-mb-2">Vertical (inside flex row)</h4>
         <div
           style="display: flex; align-items: center; gap: 1rem; height: 70px"
         >