maverick-wave 5.30.0 → 5.32.0

package/src/partials/cards-container.html

@@ -1,727 +0,0 @@
-<h3 class="mw-section-subtitle">Cards</h3>
-<p class="mw-text-muted mw-text-measure">
-  The framework's main container: a surface, padding, an optional image, a
-  header and a footer. The add-ons - badge, ribbon, title icon - all take their
-  colour from one <code>mw-card-addon-*</code> class on the card itself.
-</p>
-
-<h3 class="mw-mb-4">Standard Cards</h3>
-<div class="mw-grid-3">
-  <div class="mw-card">
-    <div class="mw-card-img">
-      <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">
-      <h3 class="mw-card-title">Featured Article</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-subtitle">
-        This is the subtitle of this card in secondary text color
-      </p>
-      <p class="mw-card-text">
-        Cards are versatile containers for displaying related content and
-        actions. This example shows an image card with a title and descriptive
-        text.
-      </p>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-link">Read Article</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">Project Update</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        A simple card without an image works well for text-focused content. Use
-        cards to organize information into digestible sections with clear visual
-        hierarchy.
-      </p>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-outline">
-          View Details
-        </button>
-        <span class="mw-text-secondary">Last updated: 2025-04-12</span>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">Development Stack</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Cards can include various components like tags to categorize content.
-        This example shows how to display technologies used in a project.
-      </p>
-      <div class="mw-tags">
-        <span class="mw-tags-item">HTML</span>
-        <span class="mw-tags-item">CSS</span>
-        <span class="mw-tags-item">JavaScript</span>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Cards with Title Icon</h3>
-<div class="mw-grid-3">
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">
-        <span class="mw-card-title-icon">
-          <i class="fas fa-file-invoice"></i>
-        </span>
-        Invoices
-      </h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Put a round icon badge in front of the card title. The icon uses the
-        primary color out of the box.
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-addon-info">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">
-        <span class="mw-card-title-icon">
-          <i class="fas fa-calendar-check"></i>
-        </span>
-        Appointments
-      </h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Add an addon class to the card and the icon changes color with it - the
-        same switch that drives badge and ribbon.
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-addon-success">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">
-        <span class="mw-card-title-icon">
-          <i class="fas fa-chart-line"></i>
-        </span>
-        Income and expenses over the whole year
-      </h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        A title that needs more than one line keeps wrapping, the icon stays at
-        its size and sits centered next to the text block.
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card">
-    <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=""
-            loading="lazy"
-          />
-        </span>
-        A logo instead of an icon
-      </h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        The same slot takes an <code>&lt;img&gt;</code> - a product logo, a
-        portrait. Add <code>mw-card-title-icon-lg</code> there: a wordmark
-        inside the default 38px is a smudge.
-      </p>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Tech-Stack Cards</h3>
-<div class="mw-grid-5">
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-laptop-code"></i>
-      </div>
-      <h4 class="mw-card-stack-title">Frontend</h4>
-    </div>
-    <div class="mw-card-stack-body">
-      <div class="mw-tags">
-        <span class="mw-tags-item">React</span>
-        <span class="mw-tags-item">TypeScript</span>
-        <span class="mw-tags-item">Next.js</span>
-        <span class="mw-tags-item">Tailwind CSS</span>
-      </div>
-      <p class="mw-card-stack-text">
-        Building responsive, accessible, and performant user interfaces
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-server"></i>
-      </div>
-      <h4 class="mw-card-stack-title">Backend</h4>
-    </div>
-    <div class="mw-card-stack-body">
-      <div class="mw-tags">
-        <span class="mw-tags-item">Node.js</span>
-        <span class="mw-tags-item">Express</span>
-        <span class="mw-tags-item">NestJS</span>
-        <span class="mw-tags-item">GraphQL</span>
-      </div>
-      <p class="mw-card-stack-text">
-        Developing scalable APIs and server-side applications
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-database"></i>
-      </div>
-      <h4 class="mw-card-stack-title">Data Storage</h4>
-    </div>
-    <div class="mw-card-stack-body">
-      <div class="mw-tags">
-        <span class="mw-tags-item">MongoDB</span>
-        <span class="mw-tags-item">PostgreSQL</span>
-        <span class="mw-tags-item">Redis</span>
-        <span class="mw-tags-item">Prisma</span>
-      </div>
-      <p class="mw-card-stack-text">
-        Managing structured and unstructured data with the right tools
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-cloud"></i>
-      </div>
-      <h4 class="mw-card-stack-title">DevOps & Cloud</h4>
-    </div>
-    <div class="mw-card-stack-body">
-      <div class="mw-tags">
-        <span class="mw-tags-item">Docker</span>
-        <span class="mw-tags-item">GitHub Actions</span>
-        <span class="mw-tags-item">AWS</span>
-        <span class="mw-tags-item">Vercel</span>
-      </div>
-      <p class="mw-card-stack-text">
-        Automating deployment and scaling applications in the cloud
-      </p>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-stack">
-    <div class="mw-card-stack-header">
-      <div class="mw-card-stack-icon">
-        <i class="fas fa-vial"></i>
-      </div>
-      <h4 class="mw-card-stack-title">Testing & Quality</h4>
-    </div>
-    <div class="mw-card-stack-body">
-      <p class="mw-card-stack-text">
-        Ensuring code quality and reliability through automated testing
-      </p>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Large Cards</h3>
-<p class="mw-text-muted">
-  If you have a image and want to display the entire image, replace the standard
-  <code>mw-card-img</code> class with <code>mw-card-img-contain</code> in your
-  card markup. This alternative style ensures the complete image is visible
-  while maintaining centering and proportions. (See the first large and the
-  second extra large card)
-</p>
-<p class="mw-text-muted">
-  Besides <code>mw-card-lg</code> and <code>mw-card-xl</code> you can set any
-  image height yourself with the <code>--mw-card-img-height</code> custom
-  property on the card.
-</p>
-<div class="mw-grid-2">
-  <div class="mw-card mw-card-lg">
-    <div class="mw-card-img">
-      <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">
-      <h3 class="mw-card-title">Large Card</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Large cards feature taller images (340px height) that work well for
-        portrait-oriented photos or when you want to showcase more of your
-        visual content.
-      </p>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-primary">
-          View Gallery
-        </button>
-        <span class="mw-text-muted">12 Photos</span>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-lg">
-    <div class="mw-card-img">
-      <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">
-      <h3 class="mw-card-title">Team Member</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Large cards are perfect for team profiles, product features, or any
-        content where the image deserves more prominence in your layout.
-      </p>
-      <div class="mw-tags">
-        <span class="mw-tags-item">Design</span>
-        <span class="mw-tags-item">UX Research</span>
-        <span class="mw-tags-item">Prototyping</span>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Extra Large Cards</h3>
-<p class="mw-text-muted">
-  Here you can see the difference in portrait images between the standard
-  <code>mw-card-img</code> class on the first image and
-  <code>mw-card-img-contain</code> class on the second image.
-</p>
-<div class="mw-grid-2">
-  <div class="mw-card mw-card-xl">
-    <div class="mw-card-img">
-      <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">
-      <h3 class="mw-card-title">Featured Profile</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-subtitle">
-        This is the subtitle of this card in secondary text color
-      </p>
-      <p class="mw-card-text">
-        Extra large cards with 480px image height are ideal for portrait
-        photography, profile spotlights, or when the visual element is the
-        primary focus of your content.
-      </p>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-primary">
-          View Profile
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-card mw-card-xl">
-    <div class="mw-card-img-contain">
-      <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">
-      <h3 class="mw-card-title">Artist Spotlight</h3>
-      <p class="mw-card-text">
-        The extra large card format creates a dramatic visual impact, making it
-        perfect for highlighting key people, products, or artistic content in
-        your application.
-      </p>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-outline">
-          View Portfolio
-        </button>
-        <span class="mw-text-muted">Featured Artist</span>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Note Above the Actions</h3>
-<p class="mw-text-muted">
-  <code>mw-actions-note</code> puts one right-aligned, muted line above a row of
-  actions - what the buttons apply to, why one of them is disabled, or that
-  something cannot be taken back. It goes straight into the action row and needs
-  no wrapper: the line takes the full width and pushes the buttons below it. It
-  works the same way in <code>mw-card-footer</code>,
-  <code>mw-modal-footer</code>, <code>mw-form-actions</code> and
-  <code>mw-panel-footer</code>.
-</p>
-<div class="mw-grid-2-lg">
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">Subscription</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        The plan stays active until the end of the current billing period.
-      </p>
-      <div class="mw-card-footer">
-        <p class="mw-actions-note">Renews on 19 September 2026.</p>
-        <button type="button" class="mw-btn mw-btn-outline">Change plan</button>
-        <button type="button" class="mw-btn mw-btn-primary">Keep it</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">Export</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Every invoice of the selected period, as one ZIP archive.
-      </p>
-      <div class="mw-card-footer">
-        <p class="mw-actions-note">128 invoices, roughly 40 MB.</p>
-        <button type="button" class="mw-btn mw-btn-primary">
-          Start export
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Card Variations</h3>
-<div class="mw-grid-3">
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">Card with Tags</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Tags can be used to categorize content or show related topics.
-      </p>
-      <div class="mw-d-flex mw-flex-wrap mw-gap-2">
-        <span class="mw-tag mw-tag-primary">Primary</span>
-        <span class="mw-tag mw-tag-success">Success</span>
-        <span class="mw-tag mw-tag-danger">Danger</span>
-      </div>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-link">Learn More</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">Card with Avatar</h3>
-      <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"
-            loading="lazy"
-          />
-        </div>
-        <div class="mw-flex-grow-1 mw-ml-1">
-          <p class="mw-mb-0"><strong>Nadia Kern</strong></p>
-          <p class="mw-text-muted mw-mb-0">Product Designer</p>
-        </div>
-      </div>
-      <p class="mw-card-text">
-        Cards can include avatars to represent users or team members.
-      </p>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-          View Profile
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="mw-card">
-    <div class="mw-card-body">
-      <h3 class="mw-card-title">Card with Progress</h3>
-      <hr class="mw-card-title-divider" />
-      <p class="mw-card-text">
-        Include progress bars to show completion status or metrics.
-      </p>
-      <div class="mw-progress-container">
-        <div class="mw-progress-barinfo">
-          <span class="mw-progress-label">Project Status</span>
-          <span class="mw-progress-value mw-progress-percent">70</span>
-        </div>
-        <div class="mw-progress-bar">
-          <div class="mw-progress-fill" style="width: 70%"></div>
-        </div>
-      </div>
-      <div class="mw-card-footer">
-        <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
-          View Details
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<h3 class="mw-mb-4 mw-mt-6">Additional Cards</h3>
-<p class="mw-text-muted">
-  You can also use badges or ribbons on top of a card, or wrap the one card that
-  should stand out in a feature frame.
-</p>
-
-<div class="mw-grid-1">
-  <!-- Badges column -->
-  <div class="mw-p-2">
-    <h3 class="mw-card-title">Badges</h3>
-    <div class="mw-grid-2-lg">
-      <!-- Badge 1 -->
-      <div class="mw-card">
-        <div class="mw-card-badge mw-card-addon-primary">New</div>
-        <div class="mw-card-body">
-          <h3 class="mw-card-title">Latest Gadget</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            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>
-          </div>
-        </div>
-      </div>
-      <!-- Badge 2 -->
-      <div class="mw-card">
-        <div class="mw-card-badge mw-card-addon-secondary">Hot</div>
-        <div class="mw-card-img">
-          <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">
-          <h3 class="mw-card-title">Team Spotlight</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            Meet our star contributor of the month and learn their tips.
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-link">Read More</button>
-          </div>
-        </div>
-      </div>
-      <!-- Badge 3 -->
-      <div class="mw-card">
-        <div class="mw-card-badge mw-card-addon-success">Sale</div>
-        <div class="mw-card-img">
-          <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">
-          <h3 class="mw-card-title">Winter Sale</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            Enjoy up to 50% off on selected items while stocks last.
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-outline">
-              Shop Now
-            </button>
-          </div>
-        </div>
-      </div>
-      <!-- Badge 4 -->
-      <div class="mw-card">
-        <div class="mw-card-badge mw-card-addon-danger">Limited</div>
-        <div class="mw-card-body">
-          <h3 class="mw-card-title">Limited Offer</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            Only a few spots remain. Secure yours before it’s gone!
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
-              Sign Up
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Ribbons column -->
-  <div class="mw-p-2">
-    <h3 class="mw-card-title">Ribbons</h3>
-    <div class="mw-grid-2-lg">
-      <!-- Ribbon 1 -->
-      <div class="mw-card">
-        <div class="mw-card-ribbon mw-card-addon-primary">Featured</div>
-        <div class="mw-card-img">
-          <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">
-          <h3 class="mw-card-title">Featured Product</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            Our top pick selected by experts for quality and design.
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-link">Learn More</button>
-          </div>
-        </div>
-      </div>
-      <!-- Ribbon 2 -->
-      <div class="mw-card">
-        <div class="mw-card-ribbon mw-card-addon-info">
-          <span>Info</span>
-        </div>
-        <div class="mw-card-body">
-          <h3 class="mw-card-title">System Update</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            A minor update will be rolled out tonight to improve performance.
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-outline mw-btn-sm">
-              Dismiss
-            </button>
-          </div>
-        </div>
-      </div>
-      <!-- Ribbon 3 -->
-      <div class="mw-card">
-        <div class="mw-card-ribbon mw-card-addon-warning">Beta</div>
-        <div class="mw-card-img">
-          <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">
-          <h3 class="mw-card-title">Dashboard Beta</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            Try out our redesigned dashboard and send us your feedback.
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-primary">Try It</button>
-          </div>
-        </div>
-      </div>
-      <!-- Ribbon 4 -->
-      <div class="mw-card">
-        <div class="mw-card-ribbon mw-card-addon-danger">Highlight Project</div>
-        <div class="mw-card-body">
-          <h3 class="mw-card-title">VIP Access</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            Invitation-only preview of our upcoming premium features.
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-outline">
-              Request Invite
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- Feature frame column -->
-  <div class="mw-p-2">
-    <h3 class="mw-card-title mw-mb-10">Feature Frame</h3>
-    <div class="mw-grid-3-lg">
-      <div class="mw-card">
-        <div class="mw-card-body">
-          <h3 class="mw-card-title">Starter</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">The basics to get going, billed monthly.</p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-outline">Choose</button>
-          </div>
-        </div>
-      </div>
-      <div class="mw-card-feature">
-        <p class="mw-card-feature-label">Most booked</p>
-        <div class="mw-card">
-          <div class="mw-card-body">
-            <h3 class="mw-card-title">Standard</h3>
-            <hr class="mw-card-title-divider" />
-            <p class="mw-card-text">
-              Everything from Starter plus the features most people ask for.
-            </p>
-            <div class="mw-card-footer">
-              <button type="button" class="mw-btn mw-btn-primary">
-                Choose
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="mw-card">
-        <div class="mw-card-body">
-          <h3 class="mw-card-title">Premium</h3>
-          <hr class="mw-card-title-divider" />
-          <p class="mw-card-text">
-            The full set, with priority support on top.
-          </p>
-          <div class="mw-card-footer">
-            <button type="button" class="mw-btn mw-btn-outline">Choose</button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <p class="mw-text-muted mw-mt-6">
-      The frame is primary by default, secondary and info are one class away.
-    </p>
-    <div class="mw-grid-3-lg mw-mt-10">
-      <div class="mw-card-feature">
-        <p class="mw-card-feature-label">Primary</p>
-        <div class="mw-card">
-          <div class="mw-card-body">
-            <h3 class="mw-card-title">Standard</h3>
-            <hr class="mw-card-title-divider" />
-            <p class="mw-card-text">The one most people end up picking.</p>
-          </div>
-        </div>
-      </div>
-      <div class="mw-card-feature mw-card-feature-secondary">
-        <p class="mw-card-feature-label">Secondary</p>
-        <div class="mw-card">
-          <div class="mw-card-body">
-            <h3 class="mw-card-title">Team</h3>
-            <hr class="mw-card-title-divider" />
-            <p class="mw-card-text">Seats for everyone, billed per head.</p>
-          </div>
-        </div>
-      </div>
-      <div class="mw-card-feature mw-card-feature-info">
-        <p class="mw-card-feature-label">Info</p>
-        <div class="mw-card">
-          <div class="mw-card-body">
-            <h3 class="mw-card-title">Trial</h3>
-            <hr class="mw-card-title-divider" />
-            <p class="mw-card-text">Free for 30 days, no card needed.</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>