Card

1<article class="card">2  <header>3    <h3>Login to your account</h3>4    <p>Enter your email below to login to your account</p>5    <div data-action>6      <button type="button" class="link">Sign Up</button>7    </div>8  </header>9  <form class="vstack gap-4">10    <div data-field>11      <label for="card-demo-email">Email</label>12      <input id="card-demo-email" type="email" placeholder="[email protected]" required />13    </div>14    <div data-field>15      <div class="flex items-center justify-between gap-2">16        <label for="card-demo-password">Password</label>17        <a href="#" class="unstyled">Forgot your password?</a>18      </div>19      <input id="card-demo-password" type="password" required />20    </div>21  </form>22  <footer class="mt-4">23    <div class="vstack w-100">24      <button type="submit">Login</button>25      <button type="button" class="outline">Login with Google</button>26    </div>27  </footer>28</article>29 

1<article class="card p-4">2  <header>3    <h3>Scheduled reports</h3>4    <p>Weekly snapshots. No more manual exports.</p>5  </header>6  <ul class="unstyled vstack gap-2 mt-2 mb-2">7    <li class="flex items-start gap-2">8      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-light"><path d="m9 18 6-6-6-6" /></svg>9      <span>Choose a schedule (daily, or weekly).</span>10    </li>11    <li class="flex items-start gap-2">12      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-light"><path d="m9 18 6-6-6-6" /></svg>13      <span>Send to channels or specific teammates.</span>14    </li>15    <li class="flex items-start gap-2">16      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-light"><path d="m9 18 6-6-6-6" /></svg>17      <span>Include charts, tables, and key metrics.</span>18    </li>19  </ul>20  <footer>21    <div class="vstack w-100">22      <button type="button" class="small">Set up scheduled reports</button>23      <button type="button" class="outline small">See what's new</button>24    </div>25  </footer>26</article>27 

1<div class="flex flex-wrap gap-4">2  <article class="card" style="flex: 1 1 16rem">3    <header>4      <h3>Default</h3>5      <p>Padding comes from --space-6 via --mo-card-padding.</p>6    </header>7    <p class="mt-2">Cards accept a padding hook so density can change per surface without touching the component.</p>8  </article>9 10  <article class="card" style="flex: 1 1 16rem; --mo-card-padding: var(--space-3)">11    <header>12      <h3>Compact</h3>13      <p>Same card, --mo-card-padding set to --space-3.</p>14    </header>15    <p class="mt-2">Dense dashboards and sidebars drop the padding hook to a smaller step.</p>16  </article>17</div>18 

1<article class="card flush" style="max-width:22rem; margin-inline:auto;">2  <img src="https://avatar.vercel.sh/shadcn1" alt="Event cover" class="w-100" style="aspect-ratio:16/9;" />3  <header class="p-4">4    <h3>Design systems meetup</h3>5    <p>A practical talk on component APIs, accessibility, and shipping faster.</p>6    <div data-action>7      <span class="badge" data-variant="secondary">Featured</span>8    </div>9  </header>10  <footer class="p-4">11    <button type="button" class="w-100">View Event</button>12  </footer>13</article>14 

1<article class="card flush">2  <header class="p-4">3    <h3>Terms of Service</h3>4    <p>Review the terms before accepting the agreement.</p>5  </header>6  <div class="p-4">7    <p>These terms govern your use of the workspace, including access to shared documents, project files, and collaboration tools.</p>8    <p>You are responsible for the content you upload and for ensuring that your team has the appropriate permissions to view or edit it.</p>9    <p>We may update features or limits as the service evolves. When those changes materially affect your workflow, we will notify your workspace administrators.</p>10    <p>By continuing, you agree to keep your account credentials secure and to follow your organization's acceptable use policies.</p>11  </div>12  <footer class="p-4 bordered justify-end">13    <button type="button" class="outline">Decline</button>14    <button type="button">Accept</button>15  </footer>16</article>17 

1<article class="card">2  <header>3    <h3>Notifications</h3>4    <p>You have 3 unread messages.</p>5    <div data-action>6      <button type="button" class="icon ghost small" aria-label="Mark all as read">7        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14" /></svg>8      </button>9    </div>10  </header>11  <footer class="bordered">12    <button type="button">Mark all as read</button>13  </footer>14</article>15