@keenmate/pure-admin-core 1.0.0-rc01

package/snippets/cards.html

@@ -0,0 +1,393 @@
+<!-- ================================
+     CARD SNIPPETS
+     Pure Admin Visual Framework
+     ================================ -->
+
+<!-- BASIC CARD -->
+
+<!-- Simple Card -->
+<div class="pa-card">
+  <div class="pa-card__body">
+    This is a simple card with just a body.
+  </div>
+</div>
+
+
+<!-- CARD WITH HEADER -->
+
+<!-- Card with Header -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>Card Title</h3>
+  </div>
+  <div class="pa-card__body">
+    Card content goes here.
+  </div>
+</div>
+
+
+<!-- CARD WITH FOOTER -->
+
+<!-- Card with Footer -->
+<div class="pa-card">
+  <div class="pa-card__body">
+    Card content goes here.
+  </div>
+  <div class="pa-card__footer">
+    <button class="pa-btn pa-btn--primary">Action</button>
+  </div>
+</div>
+
+
+<!-- COMPLETE CARD -->
+
+<!-- Card with Header, Body, and Footer -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>Complete Card</h3>
+  </div>
+  <div class="pa-card__body">
+    <p>This card has all three sections: header, body, and footer.</p>
+  </div>
+  <div class="pa-card__footer">
+    <button class="pa-btn pa-btn--secondary">Cancel</button>
+    <button class="pa-btn pa-btn--primary">Save</button>
+  </div>
+</div>
+
+
+<!-- CARD WITH TABS -->
+
+<!-- Card with Tabs -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <div class="pa-card__tabs">
+      <button class="pa-card__tab pa-card__tab--active">Overview</button>
+      <button class="pa-card__tab">Details</button>
+      <button class="pa-card__tab">Settings</button>
+    </div>
+  </div>
+  <div class="pa-card__body">
+    <p>Tab content goes here.</p>
+  </div>
+</div>
+
+
+<!-- CARD VARIANTS -->
+
+<!-- Primary Card -->
+<div class="pa-card pa-card--primary">
+  <div class="pa-card__header">
+    <h3>Primary Card</h3>
+  </div>
+  <div class="pa-card__body">
+    Content here.
+  </div>
+</div>
+
+<!-- Success Card -->
+<div class="pa-card pa-card--success">
+  <div class="pa-card__header">
+    <h3>Success Card</h3>
+  </div>
+  <div class="pa-card__body">
+    Content here.
+  </div>
+</div>
+
+<!-- Warning Card -->
+<div class="pa-card pa-card--warning">
+  <div class="pa-card__header">
+    <h3>Warning Card</h3>
+  </div>
+  <div class="pa-card__body">
+    Content here.
+  </div>
+</div>
+
+<!-- Danger Card -->
+<div class="pa-card pa-card--danger">
+  <div class="pa-card__header">
+    <h3>Danger Card</h3>
+  </div>
+  <div class="pa-card__body">
+    Content here.
+  </div>
+</div>
+
+<!-- Stat Card (Basic) -->
+<div class="pa-card pa-card--stat">
+  <div class="pa-card__body">
+    <div class="pa-stat">
+      <div class="pa-stat__value">1,234</div>
+      <div class="pa-stat__label">Total Users</div>
+    </div>
+  </div>
+</div>
+
+<!-- Stat Card with Icon -->
+<div class="pa-card pa-card--stat">
+  <div class="pa-card__body">
+    <div class="pa-stat pa-stat--with-icon">
+      <div class="pa-stat__icon">👥</div>
+      <div class="pa-stat__content">
+        <div class="pa-stat__value">1,234</div>
+        <div class="pa-stat__label">Total Users</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Stat Card with Trend -->
+<div class="pa-card pa-card--stat">
+  <div class="pa-card__body">
+    <div class="pa-stat">
+      <div class="pa-stat__value">$12,345</div>
+      <div class="pa-stat__label">Revenue</div>
+      <div class="pa-stat__trend pa-stat__trend--up">+12.5%</div>
+    </div>
+  </div>
+</div>
+
+
+<!-- CARD WITH ACTIONS IN HEADER -->
+
+<!-- Card with Header Actions -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>Card with Actions</h3>
+    <div class="pa-btn-group">
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">Cancel</button>
+      <button class="pa-btn pa-btn--sm pa-btn--success">Save</button>
+    </div>
+  </div>
+  <div class="pa-card__body">
+    Card content.
+  </div>
+</div>
+
+
+<!-- CARD WITH TITLE COMPONENTS -->
+
+<!-- Card with Title Icon and Text -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <div class="pa-card__title">
+      <span class="pa-card__title-icon">📊</span>
+      <h3 class="pa-card__title-text">Analytics Dashboard</h3>
+    </div>
+    <div class="pa-card__tools">
+      <button class="pa-btn pa-btn--sm pa-btn--secondary">Refresh</button>
+    </div>
+  </div>
+  <div class="pa-card__body">
+    Dashboard content with title icon and tools.
+  </div>
+</div>
+
+
+<!-- CARD WITH METADATA -->
+
+<!-- Card with Meta Information -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>Article Title</h3>
+    <span class="pa-card__meta">Published 2 hours ago</span>
+  </div>
+  <div class="pa-card__body">
+    Article content goes here.
+  </div>
+</div>
+
+
+<!-- CARD WITH FOOTER ACTIONS -->
+
+<!-- Card with Footer Actions -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>Form Card</h3>
+  </div>
+  <div class="pa-card__body">
+    Form content here.
+  </div>
+  <div class="pa-card__footer">
+    <div></div>
+    <div class="pa-card__actions">
+      <button class="pa-btn pa-btn--secondary">Cancel</button>
+      <button class="pa-btn pa-btn--success">Save</button>
+    </div>
+  </div>
+</div>
+
+
+<!-- CARD WITH NO PADDING BODY -->
+
+<!-- Card with No Padding Body (for tables) -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <h3>User List</h3>
+  </div>
+  <div class="pa-card__body pa-card__body--no-padding">
+    <table class="pa-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Email</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>John Doe</td>
+          <td>john@example.com</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+
+<!-- CARD WITH TAB CONTENT -->
+
+<!-- Card with Tab Content Areas -->
+<div class="pa-card">
+  <div class="pa-card__header">
+    <div class="pa-card__tabs">
+      <button class="pa-card__tab pa-card__tab--active" onclick="switchTab(this, 'tab1')">Tab 1</button>
+      <button class="pa-card__tab" onclick="switchTab(this, 'tab2')">Tab 2</button>
+      <button class="pa-card__tab" onclick="switchTab(this, 'tab3')">Tab 3</button>
+    </div>
+  </div>
+  <div class="pa-card__body">
+    <div class="pa-card__tab-content pa-card__tab-content--active" id="tab1">
+      Content for Tab 1
+    </div>
+    <div class="pa-card__tab-content" id="tab2">
+      Content for Tab 2
+    </div>
+    <div class="pa-card__tab-content" id="tab3">
+      Content for Tab 3
+    </div>
+  </div>
+</div>
+
+
+<!-- SAME HEIGHT CARDS -->
+
+<!-- Equal Height Cards in a Row -->
+<div class="pa-row pa-row--same-height">
+  <div class="pa-col-100 pa-col-md-1-3">
+    <div class="pa-card">
+      <div class="pa-card__header">
+        <h3>Short Card</h3>
+      </div>
+      <div class="pa-card__body">
+        <p>Minimal content.</p>
+      </div>
+    </div>
+  </div>
+  <div class="pa-col-100 pa-col-md-1-3">
+    <div class="pa-card">
+      <div class="pa-card__header">
+        <h3>Tall Card</h3>
+      </div>
+      <div class="pa-card__body">
+        <p>This card has more content.</p>
+        <p>All cards stretch to match this height.</p>
+        <p>Useful for consistent dashboard layouts.</p>
+      </div>
+    </div>
+  </div>
+  <div class="pa-col-100 pa-col-md-1-3">
+    <div class="pa-card">
+      <div class="pa-card__header">
+        <h3>Medium Card</h3>
+      </div>
+      <div class="pa-card__body">
+        <p>Also stretches to match.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- CARD SECTION -->
+
+<!-- Section with Heading -->
+<div class="pa-section">
+  <h3>Section Title</h3>
+  <div class="pa-card">
+    <div class="pa-card__body">
+      Content inside section
+    </div>
+  </div>
+</div>
+
+
+<!-- JAVASCRIPT FOR TAB SWITCHING -->
+<script>
+function switchTab(button, tabId) {
+  // Remove active class from all tabs
+  const tabs = button.parentElement.querySelectorAll('.pa-card__tab');
+  tabs.forEach(tab => tab.classList.remove('pa-card__tab--active'));
+
+  // Add active class to clicked tab
+  button.classList.add('pa-card__tab--active');
+
+  // Hide all tab content
+  const card = button.closest('.pa-card');
+  const contents = card.querySelectorAll('.pa-card__tab-content');
+  contents.forEach(content => content.classList.remove('pa-card__tab-content--active'));
+
+  // Show selected tab content
+  const selectedContent = card.querySelector(`#${tabId}`);
+  if (selectedContent) {
+    selectedContent.classList.add('pa-card__tab-content--active');
+  }
+}
+</script>
+
+
+<!-- ================================
+     COMPONENT REFERENCE
+     ================================ -->
+
+<!--
+CARD CLASSES:
+- .pa-card: Base card class
+- .pa-card--primary, --success, --warning, --danger: Colored header variants
+- .pa-card--stat: Stat card variant (compact, centered)
+
+CARD ELEMENTS:
+- .pa-card__header: Card header container
+- .pa-card__body: Card body/content container
+- .pa-card__body--no-padding: Remove body padding (for tables)
+- .pa-card__footer: Card footer container
+- .pa-card__meta: Metadata text (dates, author, etc.)
+- .pa-card__title: Title container
+- .pa-card__title-icon: Icon in title
+- .pa-card__title-text: Title text
+- .pa-card__tools: Tools/actions container in header
+- .pa-card__actions: Actions container in footer
+
+CARD TABS:
+- .pa-card__tabs: Tab container in header
+- .pa-card__tab: Individual tab button
+- .pa-card__tab--active: Active tab state
+- .pa-card__tab-content: Tab panel content
+- .pa-card__tab-content--active: Active tab panel
+
+STAT COMPONENT (inside stat cards):
+- .pa-stat: Stat container
+- .pa-stat--with-icon: Stat with icon layout
+- .pa-stat__icon: Stat icon
+- .pa-stat__content: Content wrapper (when using icon)
+- .pa-stat__value: Stat value (large number)
+- .pa-stat__label: Stat label/description
+- .pa-stat__trend: Trend indicator
+- .pa-stat__trend--up: Positive trend (green)
+- .pa-stat__trend--down: Negative trend (red)
+
+LAYOUT:
+- .pa-row--same-height: Equal height cards in a row
+- .pa-section: Section container with heading
+-->