Card

<div class="mn-card" style="max-width:24rem">
  <div class="mn-card-header">
    <h3 class="mn-card-title">Create project</h3>
    <p class="mn-card-description">Deploy your new project in one click.</p>
  </div>
  <div class="mn-card-body mn-form">
    <div class="mn-field"><label class="mn-label" for="cp-n">Name</label><input class="mn-input" id="cp-n" placeholder="My project"></div>
    <div class="mn-field"><label class="mn-label" for="cp-f">Framework</label><select class="mn-select" id="cp-f"><option>Astro</option><option>Laravel</option></select></div>
  </div>
  <div class="mn-card-footer" style="justify-content:space-between"><button class="mn-btn mn-btn-outline">Cancel</button><button class="mn-btn">Deploy</button></div>
</div>

<article class="mn-card" style="max-width:20rem">
  <div class="mn-card-media" style="background:linear-gradient(135deg, var(--mn-primary), var(--mn-accent))"></div>
  <div class="mn-card-header">
    <div class="mn-row"><span class="mn-badge mn-badge-soft">Guide</span><span class="mn-muted mn-small">6 min read</span></div>
    <h3 class="mn-card-title">Choosing a noodle for your product</h3>
  </div>
  <div class="mn-card-body mn-muted">Twelve design systems, one component set. How to pick the one that fits your brand.</div>
</article>

<div class="mn-card" style="max-width:26rem">
  <div class="mn-card-header">
    <div><h3 class="mn-card-title">Notifications</h3><p class="mn-card-description">You have 3 unread messages.</p></div>
    <div class="mn-card-actions"><button class="mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm" aria-label="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg></button></div>
  </div>
  <div class="mn-card-body">Your call has been confirmed for 14:00 tomorrow.</div>
  <div class="mn-card-footer mn-card-footer-bordered"><button class="mn-btn mn-btn-block"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Mark all as read</button></div>
</div>