maverick-wave 3.0.0

package/src/partials/cards-container.html

@@ -0,0 +1,508 @@
+<h3 class="mw-section-subtitle">Cards</h3>
+
+<h3 class="mw-mb-4">Standard Cards</h3>
+<div class="mw-grid-3">
+  <div class="mw-card mw-card-content">
+    <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"
+      />
+    </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 mw-card-content">
+    <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 mw-card-content">
+    <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">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>
+      <h5 class="mw-card-stack-title">Frontend</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <div class="mw-tags mw-tags-stack">
+        <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>
+      <h5 class="mw-card-stack-title">Backend</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <div class="mw-tags mw-tags-stack">
+        <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>
+      <h5 class="mw-card-stack-title">Data Storage</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <div class="mw-tags mw-tags-stack">
+        <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>
+      <h5 class="mw-card-stack-title">DevOps & Cloud</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <div class="mw-tags mw-tags-stack">
+        <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>
+      <h5 class="mw-card-stack-title">Testing & Quality</h5>
+    </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>
+<div class="mw-grid-2">
+  <div class="mw-card mw-card-content 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"
+      />
+    </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 (330px 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-content 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"
+      />
+    </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-content 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"
+      />
+    </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-content 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"
+      />
+    </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">Card Variations</h3>
+<div class="mw-grid-3">
+  <div class="mw-card mw-card-content">
+    <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-tags">
+        <span class="mw-tags-item">Primary</span>
+        <span class="mw-tags-item mw-tags-item-success">Success</span>
+        <span class="mw-tags-item mw-tags-item-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 mw-card-content">
+    <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" />
+        </div>
+        <div class="mw-flex-grow-1 mw-ml-1">
+          <p class="mw-mb-0"><strong>Sarah Johnson</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 mw-card-content">
+    <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.
+</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 mw-card-content">
+        <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">
+            Introducing our brand‐new gadget with cutting-edge features.
+          </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 mw-card-content">
+        <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"
+          />
+        </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 mw-card-content">
+        <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"
+          />
+        </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 mw-card-content">
+        <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 mw-card-content">
+        <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"
+          />
+        </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 mw-card-content">
+        <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 mw-card-content">
+        <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"
+          />
+        </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 mw-card-content">
+        <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>
+</div>