maverick-wave 5.29.0 → 5.31.0

package/src/partials/progress-container.html

@@ -1,230 +0,0 @@
-<h3 class="mw-section-subtitle">Progress Bars</h3>
-<p class="mw-text-muted mw-text-measure">
-  A bar with an optional label and scale. The fill runs up from zero when it
-  scrolls into view, so the number gets read rather than just seen.
-</p>
-
-<div class="mw-grid-2">
-  <div>
-    <h3 class="mw-mb-4">Basic Progress Bars</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-mt-1 mw-mb-4">Default (75%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Project Completion</span>
-          <span class="mw-progress-value mw-progress-percent">75</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill" data-value="75"></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">Without Info (50%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo mw-progress-hide-info">
-          <span class="mw-progress-label">Hidden</span>
-          <span class="mw-progress-value">50</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill" data-value="50"></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">With scale 1-10</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">User Rating</span>
-          <span class="mw-progress-value mw-progress-numeric">7</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill" data-value="70"></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">With inline label (55%)</h4>
-      <div
-        class="mw-progress-container mw-progress-inline-label mw-mt-1 mw-mb-5"
-      >
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill mw-progress-primary" data-value="55">
-            55%
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Colored Progress Bars</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-mt-1 mw-mb-4">Primary (60%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Downloads</span>
-          <span class="mw-progress-value mw-progress-percent">60</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-primary"
-            data-value="60"
-          ></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">Secondary (50%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Uploads</span>
-          <span class="mw-progress-value mw-progress-percent">50</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-secondary"
-            data-value="50"
-          ></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">Success (100%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Task Complete</span>
-          <span class="mw-progress-value mw-progress-percent">100</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-success"
-            data-value="100"
-          ></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">Warning (30%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Disk Space</span>
-          <span class="mw-progress-value mw-progress-percent">30</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-warning"
-            data-value="30"
-          ></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">Danger (15%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Battery</span>
-          <span class="mw-progress-value mw-progress-percent">15</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-danger"
-            data-value="15"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Sizable Progress Bars</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-mt-1 mw-mb-4">Small Progress (65%)</h4>
-      <div class="mw-progress-container mw-progress-sm mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Small</span>
-          <span class="mw-progress-value mw-progress-percent">65</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill" data-value="65"></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">Default (65%)</h4>
-      <div class="mw-progress-container mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Default</span>
-          <span class="mw-progress-value mw-progress-percent">65</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill" data-value="60"></div>
-        </div>
-      </div>
-
-      <h4 class="mw-my-4">Large (65%)</h4>
-      <div class="mw-progress-container mw-progress-lg mw-mt-1 mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Large</span>
-          <span class="mw-progress-value mw-progress-percent">65</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill" data-value="65"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Skill Levels</h3>
-    <div class="mw-card mw-card-simple">
-      <!-- React → Junior (25%) -->
-      <div class="mw-progress-container mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">React</span>
-          <span class="mw-progress-value">Junior</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-secondary"
-            data-value="25"
-          ></div>
-        </div>
-      </div>
-
-      <!-- Java → Professional (50%) -->
-      <div class="mw-progress-container mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Java</span>
-          <span class="mw-progress-value">Professional</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-secondary"
-            data-value="50"
-          ></div>
-        </div>
-      </div>
-
-      <!-- Python → Senior (70%) -->
-      <div class="mw-progress-container mw-mb-5">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Python</span>
-          <span class="mw-progress-value">Senior</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-secondary"
-            data-value="75"
-          ></div>
-        </div>
-      </div>
-
-      <!-- Go → Expert (90%) -->
-      <div class="mw-progress-container">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Go</span>
-          <span class="mw-progress-value">Expert</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div
-            class="mw-progress-fill mw-progress-secondary"
-            data-value="95"
-          ></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/prose-container.html

@@ -1,43 +0,0 @@
-<h3 class="mw-section-subtitle">Prose</h3>
-<p class="mw-text-muted mw-text-measure">
-  Long-form running text - a legal page, terms, a plain article. One class on
-  the container, bare <code>h2</code>/<code>h3</code>/<code>p</code>/<code
-    >ul</code
-  >
-  inside: exactly what a CMS or a JSON-driven page produces. Headings stay
-  deliberately small - in a document they structure the reading, they do not
-  compete with the page title.
-</p>
-
-<div class="mw-card mw-card-simple mw-prose">
-  <h2>1. Scope</h2>
-  <p>
-    These terms apply to every order placed through this site. Deviating
-    conditions of the customer do not apply unless expressly confirmed in
-    writing.
-  </p>
-
-  <h2>2. Contract</h2>
-  <p>
-    The presentation of products is not a binding offer. A contract comes into
-    existence when the order confirmation arrives, at the latest with the
-    delivery of the goods.
-  </p>
-  <h3>2.1 Cancellation</h3>
-  <p>
-    Consumers may cancel within fourteen days without giving a reason. The
-    period starts on the day the goods arrive. For the cancellation to count,
-    one of the following is enough:
-  </p>
-  <ul>
-    <li>an informal e-mail naming the order number</li>
-    <li>the returned goods with a short note</li>
-    <li>the cancellation form from the appendix</li>
-  </ul>
-
-  <h2>3. Prices</h2>
-  <p>
-    All prices are final prices and include the statutory value-added tax.
-    Shipping costs are shown separately before the order is placed.
-  </p>
-</div>

package/src/partials/ratings-container.html

@@ -1,104 +0,0 @@
-<h3 class="mw-section-subtitle">Ratings</h3>
-<p class="mw-text-muted mw-text-measure">
-  Change the <code>data-rating</code> attribute (0-5) to see how many thumbs-up
-  light up. You can also determine the icon flexibly.
-</p>
-
-<div class="mw-grid-2-lg">
-  <div>
-    <h3 class="mw-mb-4">Ratings in different sizes</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">User Rating (size SM)</p>
-        <div class="mw-rating mw-rating-sm" data-rating="4">
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-        </div>
-      </div>
-
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">Product Rating</p>
-        <div class="mw-rating" data-rating="3">
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-        </div>
-      </div>
-
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">Movie Rating (size LG)</p>
-        <div class="mw-rating mw-rating-lg" data-rating="2">
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-thumbs-up" aria-hidden="true"></i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
-    <h3 class="mw-mb-4">Ratings with other icons</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">Product Rating</p>
-        <div class="mw-rating" data-rating="3">
-          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-fire" aria-hidden="true"></i>
-        </div>
-      </div>
-
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">Product Rating</p>
-        <div class="mw-rating" data-rating="3">
-          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-trophy" aria-hidden="true"></i>
-        </div>
-      </div>
-
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">Product Rating</p>
-        <div class="mw-rating" data-rating="3">
-          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-gem" aria-hidden="true"></i>
-        </div>
-      </div>
-
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">Product Rating</p>
-        <div class="mw-rating" data-rating="3">
-          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-bolt" aria-hidden="true"></i>
-        </div>
-      </div>
-
-      <div class="mw-rating-container mw-my-3">
-        <p class="mw-rating-info">Product Rating</p>
-        <div class="mw-rating" data-rating="3">
-          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
-          <i class="mw-rating-icon fas fa-leaf" aria-hidden="true"></i>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/section-head-container.html

@@ -1,77 +0,0 @@
-<h3 class="mw-section-subtitle">Section Head</h3>
-
-<p class="mw-text-muted">
-  The opening of a section: a hairline rule, a mark sitting on its left end, the
-  title, and the line that says what follows. Everything starts at one edge -
-  centred body copy moves its own left edge with every line break, so the eye
-  has to find the start of each line instead of jumping to a fixed position.
-  Fine for a heading, tiring from the third line on.
-</p>
-
-<div class="mw-grid-1">
-  <div>
-    <h3 class="mw-mb-4">Title, Lead and Mark</h3>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-section-head">
-        <h2 class="mw-section-head-title">Foundations</h2>
-        <p class="mw-section-head-intro">
-          The raw material - type, color, spacing and the small utilities
-          everything else is built from. The lead stops at 65 characters, or at
-          four fifths of the container, whichever comes first.
-        </p>
-      </div>
-      <p class="mw-mb-0">The content of the section starts here.</p>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Numbered</h3>
-    <p class="mw-text-muted mw-mb-4">
-      <code>mw-section-head-numbered</code> counts in the browser, so no page
-      keeps its own running order in the markup. The number closes the rule the
-      mark opens, and the counter restarts per <code>mw-main</code>. Opt-in: a
-      single section on a legal page numbered "01" is noise.
-    </p>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-section-head mw-section-head-numbered">
-        <h2 class="mw-section-head-title">About me</h2>
-        <p class="mw-section-head-intro">
-          A section head without a lead works the same way - the next one below
-          shows it, and takes a smaller gap to the content for it.
-        </p>
-      </div>
-
-      <div class="mw-section-head mw-section-head-numbered">
-        <h2 class="mw-section-head-title">Contact</h2>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Colored Mark</h3>
-    <p class="mw-text-muted mw-mb-4">
-      The mark is the one colored thing in the head, so it is where a section
-      picks up a tone: <code>mw-section-head-secondary</code>,
-      <code>-success</code>, <code>-warning</code>, <code>-danger</code> and
-      <code>-info</code>. Its length is
-      <code>--mw-section-head-mark-width</code> (80px), the gap to the content
-      below <code>--mw-section-head-gap</code>. That gap and the space above the
-      title are multiples of <code>--mw-section-head-step</code>, which follows
-      <code>--mw-section-padding-block</code> - so the section spacing picker in
-      the palette panel moves the heads along with the page.
-    </p>
-    <div class="mw-card mw-card-simple">
-      <div class="mw-section-head mw-section-head-secondary">
-        <h2 class="mw-section-head-title">Secondary</h2>
-      </div>
-
-      <div class="mw-section-head mw-section-head-danger">
-        <h2 class="mw-section-head-title">Danger</h2>
-      </div>
-
-      <div class="mw-section-head mw-section-head-success">
-        <h2 class="mw-section-head-title">Success</h2>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/segmented-container.html

@@ -1,66 +0,0 @@
-<h3 class="mw-section-subtitle">Segmented Control</h3>
-
-<p class="mw-text-muted">
-  Two or three positions of <em>one</em> switch - income or expense, offer or
-  quote. Deliberately not a <strong>mw-button-bar</strong>: that one stacks
-  below 576px and gives every button 96% width, which is right for a row of
-  independent actions and wrong here. Stacked, two positions of a switch look
-  like two buttons you could press both of. A segmented control stays horizontal
-  at every width and splits the row into equal shares.
-</p>
-
-<div class="mw-grid-2-lg">
-  <div>
-    <h3 class="mw-mb-4">Two Positions</h3>
-    <div class="mw-card mw-card-simple">
-      <label class="mw-field-label mw-d-block mw-mb-2">Booking type</label>
-      <div class="mw-segmented mw-mb-6">
-        <button type="button" class="mw-segmented-item mw-active">
-          <i class="fas fa-arrow-down"></i>
-          Income
-        </button>
-        <button type="button" class="mw-segmented-item">
-          <i class="fas fa-arrow-up"></i>
-          Expense
-        </button>
-      </div>
-
-      <label class="mw-field-label mw-d-block mw-mb-2">Document</label>
-      <div class="mw-segmented">
-        <button type="button" class="mw-segmented-item">Offer</button>
-        <button type="button" class="mw-segmented-item mw-active">Quote</button>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <h3 class="mw-mb-4">Three Positions & Variants</h3>
-    <div class="mw-card mw-card-simple">
-      <label class="mw-field-label mw-d-block mw-mb-2">Period</label>
-      <div class="mw-segmented mw-mb-6">
-        <button type="button" class="mw-segmented-item">Day</button>
-        <button type="button" class="mw-segmented-item mw-active">Week</button>
-        <button type="button" class="mw-segmented-item">Month</button>
-      </div>
-
-      <label class="mw-field-label mw-d-block mw-mb-2">
-        Secondary tone - <code>mw-segmented-secondary</code>
-      </label>
-      <div class="mw-segmented mw-segmented-secondary mw-mb-6">
-        <button type="button" class="mw-segmented-item mw-active">List</button>
-        <button type="button" class="mw-segmented-item">Grid</button>
-      </div>
-
-      <label class="mw-field-label mw-d-block mw-mb-2">
-        Inline - <code>mw-segmented-auto</code>
-      </label>
-      <div class="mw-segmented mw-segmented-auto">
-        <button type="button" class="mw-segmented-item mw-active">All</button>
-        <button type="button" class="mw-segmented-item">Open</button>
-        <button type="button" class="mw-segmented-item" disabled>
-          Archived
-        </button>
-      </div>
-    </div>
-  </div>
-</div>

package/src/partials/skeleton-container.html

@@ -1,87 +0,0 @@
-<h3 class="mw-section-subtitle">Skeleton Loader</h3>
-<p class="mw-text-muted mw-text-measure">
-  The shape of the content before the content arrives. Match it to what is
-  actually loading - a skeleton in the wrong shape is worse than a spinner,
-  because the page then moves twice.
-</p>
-
-<div class="mw-grid-3 mw-gap-6">
-  <!-- COLUMN 1: Text skeleton -->
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Text Lines</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-text-medium mw-mb-3">Article Placeholder</h4>
-      <div class="mw-skeleton-card">
-        <span class="mw-skeleton mw-skeleton-title"></span>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-      </div>
-
-      <h4 class="mw-text-medium mw-mt-4 mw-mb-3">Short Paragraph</h4>
-      <div class="mw-skeleton-card">
-        <span class="mw-skeleton mw-skeleton-text"></span>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-      </div>
-    </div>
-  </div>
-
-  <!-- COLUMN 2: Avatar + text -->
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Avatar & Content</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-text-medium mw-mb-3">User Card</h4>
-      <div class="mw-skeleton-card">
-        <div class="mw-skeleton-row">
-          <span class="mw-skeleton mw-skeleton-circle"></span>
-          <div class="mw-skeleton-body">
-            <span
-              class="mw-skeleton mw-skeleton-text"
-              style="width: 55%"
-            ></span>
-            <span
-              class="mw-skeleton mw-skeleton-text"
-              style="width: 80%"
-            ></span>
-          </div>
-        </div>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-      </div>
-
-      <h4 class="mw-text-medium mw-mt-4 mw-mb-3">Comment Row</h4>
-      <div class="mw-skeleton-card">
-        <div class="mw-skeleton-row">
-          <span class="mw-skeleton mw-skeleton-circle"></span>
-          <div class="mw-skeleton-body">
-            <span
-              class="mw-skeleton mw-skeleton-text"
-              style="width: 40%"
-            ></span>
-            <span class="mw-skeleton mw-skeleton-text"></span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- COLUMN 3: Image + rect shapes -->
-  <div>
-    <h3 class="mw-card-title mw-mb-4">Image & Shapes</h3>
-    <div class="mw-card mw-card-simple">
-      <h4 class="mw-text-medium mw-mb-3">Image Card</h4>
-      <div class="mw-skeleton-card">
-        <span class="mw-skeleton mw-skeleton-rect"></span>
-        <span class="mw-skeleton mw-skeleton-title"></span>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-        <span class="mw-skeleton mw-skeleton-text"></span>
-      </div>
-
-      <h4 class="mw-text-medium mw-mt-4 mw-mb-3">Small Banner</h4>
-      <div class="mw-skeleton-card">
-        <span class="mw-skeleton mw-skeleton-rect mw-skeleton-rect-sm"></span>
-        <span class="mw-skeleton mw-skeleton-text" style="width: 50%"></span>
-      </div>
-    </div>
-  </div>
-</div>