gnexus-ui-kit/demo/partials/cards.html at 62670955fb252c06b460a6b1f247285093a42b22

Fork: 0
root / gnexus-ui-kit
Find file
Newer
Older
gnexus-ui-kit / demo / partials / cards.html
Eugene Sukhodolskiy 14 hours ago 14 KB v0.3.0 — GnUserCard, NavigationShell footer slot, Vue demo partials
Raw Blame History
<section class="section docs-section" id="cards">
	<h2 class="section-title">Cards</h2>
	<p class="docs-section-description">
		Card подходит для компактных виджетов и контентных блоков.
		Цветовые состояния карточек задаются модификаторами `card-success`, `card-warning`, `card-error`, `card-info`.
	</p>

	<div class="cards">
		<div class="card">
			<h3 class="card-title">Card title</h3>

			<div class="card-content">
				<img src="/assets/imgs/gnexus-mark.svg" alt="" class="card-thumb">
				<p>Карточка для контента, виджетов, статусов.</p>
			</div>

			<div class="card-footer">
				<button class="btn btn-accent">Action</button>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="row g-4">
			<div class="card status-card card-success">
				<span class="card-title">Status title</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-check-circle"></i> OK
						</div>
					</div>

					<p class="status-name">Primary status card with a short description.</p>
				</div>
			</div>

			<div class="card status-card card-primary">
				<span class="card-title">Default</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-stack"></i>
						</div>
					</div>

					<p class="status-name">Neutral card for a module, widget, or section.</p>
				</div>
			</div>

			<div class="card status-card card-warning">
				<span class="card-title">Pending</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-warning"></i>
						</div>
					</div>

					<p class="status-name">Warning state for items that need attention.</p>
				</div>
			</div>

			<div class="card status-card card-error">
				<span class="card-title">Failed</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-warning-octagon"></i>
						</div>
					</div>

					<p class="status-name">Error state for failed actions or blocked flows.</p>
				</div>
			</div>

			<div class="card status-card card-info">
				<span class="card-title">Info</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-info"></i>
						</div>
					</div>

					<p class="status-name">Informational card for contextual metadata.</p>
				</div>
			</div>

			<div class="card status-card card-secondary">
				<span class="card-title">Queued</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-clock"></i>
						</div>
					</div>

					<p class="status-name">Secondary state for queued or background work.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="card metric-card">
			<div class="card-content">
				<div class="metric-card-header">
					<p class="metric-card-label">Monthly usage</p>
					<span class="metric-card-icon">
						<i class="ph ph-chart-line-up"></i>
					</span>
				</div>
				<p class="metric-card-value">84.2%</p>
				<div class="metric-card-meta">
					<span class="metric-card-delta">+12.8%</span>
					<span>vs previous period</span>
				</div>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="card action-card">
			<div class="card-content">
				<span class="action-card-kicker">Quick action</span>
				<h3 class="action-card-title">Create workflow</h3>
				<p class="action-card-text">
					Use action cards for primary next steps, onboarding prompts, and compact empty state actions.
				</p>
				<div class="action-card-actions">
					<button class="btn btn-secondary btn-small" type="button">Preview</button>
					<button class="btn btn-accent btn-small" type="button">Create</button>
				</div>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<h3 class="block-title">Horizontal Card</h3>
		<div class="card card-horizontal">
			<div class="card-media">
				<img src="/assets/imgs/gnexus-mark.svg" alt="">
			</div>
			<div class="card-body">
				<h3 class="card-title"><a href="#">Project Alpha</a></h3>
				<div class="card-content">
					<p>Compact horizontal layout for content listings, search results, and entity rows.</p>
				</div>
				<div class="card-footer">
					<span>Updated 2h ago</span>
					<span class="badge badge-success">Active</span>
				</div>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<h3 class="block-title">Login Card</h3>
		<div class="card login-card">
			<header class="card-title login-card-header">
				<span class="login-card-title">Sign in</span>
			</header>
			<div class="card-content">
				<form class="login-card-form" onsubmit="event.preventDefault();">
					<div class="form-group">
						<label class="label">
							Username
							<input type="text" class="input" placeholder="Enter username" autocomplete="username">
						</label>
					</div>
					<div class="form-group">
						<label class="label">
							Password
							<input type="password" class="input" placeholder="••••••" autocomplete="current-password">
						</label>
					</div>
					<button class="btn btn-secondary with-icon login-card-submit" type="submit"><i class="ph ph-sign-in"></i> Sign in</button>
					<div class="login-card-links">
						<a href="#" class="login-card-link">Forgot password?</a>
						<a href="#" class="login-card-link">Create account</a>
					</div>
				</form>
			</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Cards HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card status-card card-success"&gt;
  &lt;span class="card-title"&gt;Status title&lt;/span&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="status-icon-container"&gt;
      &lt;div class="status-icon"&gt;
        &lt;i class="ph ph-check-circle"&gt;&lt;/i&gt;
        OK
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;p class="status-name"&gt;Primary status card.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Metric Card HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card metric-card"&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="metric-card-header"&gt;
      &lt;p class="metric-card-label"&gt;Monthly usage&lt;/p&gt;
      &lt;span class="metric-card-icon"&gt;&lt;i class="ph ph-chart-line-up"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;p class="metric-card-value"&gt;84.2%&lt;/p&gt;
    &lt;div class="metric-card-meta"&gt;
      &lt;span class="metric-card-delta"&gt;+12.8%&lt;/span&gt;
      &lt;span&gt;vs previous period&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Action Card HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card action-card"&gt;
  &lt;div class="card-content"&gt;
    &lt;span class="action-card-kicker"&gt;Quick action&lt;/span&gt;
    &lt;h3 class="action-card-title"&gt;Create workflow&lt;/h3&gt;
    &lt;p class="action-card-text"&gt;
      Use action cards for primary next steps and compact empty state actions.
    &lt;/p&gt;
    &lt;div class="action-card-actions"&gt;
      &lt;button class="btn btn-secondary btn-small"&gt;Preview&lt;/button&gt;
      &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Horizontal Card HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card card-horizontal"&gt;
  &lt;div class="card-media"&gt;
    &lt;img src="/assets/imgs/cover.png" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="card-body"&gt;
    &lt;h3 class="card-title"&gt;
      &lt;a href="/projects/alpha"&gt;Project Alpha&lt;/a&gt;
    &lt;/h3&gt;
    &lt;div class="card-content"&gt;
      &lt;p&gt;Description text.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card-footer"&gt;
      &lt;span&gt;Updated 2h ago&lt;/span&gt;
      &lt;span class="badge badge-success"&gt;Active&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vue: GnHorizontalCard</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;GnHorizontalCard
  image="/assets/imgs/cover.png"
  title="Project Alpha"
  title-href="/projects/alpha"
  icon="ph-arrow-right"&gt;
  &lt;p&gt;Description text.&lt;/p&gt;
  &lt;template #footer&gt;
    &lt;span&gt;Updated 2h ago&lt;/span&gt;
    &lt;GnBadge variant="success"&gt;Active&lt;/GnBadge&gt;
  &lt;/template&gt;
&lt;/GnHorizontalCard&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vue: GnLoginCard</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;GnLoginCard
  title="Sign in"
  username-label="Username"
  password-label="Password"
  submit-text="Sign in"
  remember-me
  forgot-href="/forgot"
  signup-href="/signup"
  @submit="handleLogin"
/&gt;</code></pre>
	</div>
	<div class="block mt-6">
		<h3 class="block-title">User Card — Compact</h3>
		<article class="card user-card user-card-compact">
			<div class="user-card-body">
				<a class="profile-identity" href="#" target="_blank" rel="noopener noreferrer">
					<span class="identity">
						<span class="avatar avatar-primary avatar-sm is-online">
							<img src="https://auth.gnexus.space/storage/avatars/1/181513cf-3e1b-4b72-bc9d-a1825c736560/original.jpg" alt="">
						</span>
						<span class="identity-content">
							<span class="identity-title">Eugene Sukhodolskiy</span>
							<span class="identity-meta">goldmikki@gmail.com</span>
						</span>
					</span>
				</a>
				<div class="user-card-actions">
					<button class="btn-icon" type="button" aria-label="Edit profile"><i class="ph ph-pencil-simple" aria-hidden="true"></i></button>
					<button class="btn-icon" type="button" aria-label="Logout"><i class="ph ph-sign-out" aria-hidden="true"></i></button>
				</div>
			</div>
		</article>
	</div>

	<div class="block mt-6">
		<h3 class="block-title">User Card — Full</h3>
		<article class="card user-card">
			<div class="user-card-body">
				<span class="identity">
					<span class="avatar avatar-primary is-online">
						<img src="https://auth.gnexus.space/storage/avatars/1/181513cf-3e1b-4b72-bc9d-a1825c736560/original.jpg" alt="">
					</span>
					<span class="identity-content">
						<span class="identity-title">Eugene Sukhodolskiy</span>
						<span class="identity-meta">goldmikki@gmail.com</span>
					</span>
				</span>
				<span class="user-card-role">Lead Frontend Engineer</span>
				<div class="user-card-actions">
					<button class="btn btn-primary btn-small" type="button">View profile</button>
					<button class="btn btn-accent btn-small" type="button">Message</button>
				</div>
			</div>
		</article>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">User Card Compact HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;article class="card user-card user-card-compact"&gt;
  &lt;div class="user-card-body"&gt;
    &lt;a class="profile-identity" href="#"&gt;
      &lt;span class="identity"&gt;
        &lt;span class="avatar avatar-primary avatar-sm is-online"&gt;
          &lt;img src="..." alt=""&gt;
        &lt;/span&gt;
        &lt;span class="identity-content"&gt;
          &lt;span class="identity-title"&gt;Name&lt;/span&gt;
          &lt;span class="identity-meta"&gt;email@example.com&lt;/span&gt;
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/a&gt;
    &lt;div class="user-card-actions"&gt;
      &lt;button class="btn-icon" aria-label="Edit"&gt;
        &lt;i class="ph ph-pencil-simple"&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">User Card Full HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;article class="card user-card"&gt;
  &lt;div class="user-card-body"&gt;
    &lt;span class="identity"&gt;
      &lt;span class="avatar avatar-primary is-online"&gt;
        &lt;img src="..." alt=""&gt;
      &lt;/span&gt;
      &lt;span class="identity-content"&gt;
        &lt;span class="identity-title"&gt;Name&lt;/span&gt;
        &lt;span class="identity-meta"&gt;email@example.com&lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="user-card-role"&gt;Role&lt;/span&gt;
    &lt;div class="user-card-actions"&gt;
      &lt;button class="btn btn-primary btn-small"&gt;View profile&lt;/button&gt;
      &lt;button class="btn btn-accent btn-small"&gt;Message&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vue: GnUserCard</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;GnUserCard
  name="Eugene Sukhodolskiy"
  email="goldmikki@gmail.com"
  role="Lead Frontend Engineer"
  :avatar="{ src: '...', status: 'online' }"
  href="/profile"
  :actions="[
    { icon: 'ph-user', label: 'View profile', variant: 'primary' },
    { icon: 'ph-chat-circle', label: 'Message', variant: 'accent' }
  ]"
/&gt;

&lt;GnUserCard
  name="Eugene Sukhodolskiy"
  email="goldmikki@gmail.com"
  :avatar="{ src: '...', status: 'online' }"
  href="/profile"
  compact
  :actions="[
    { icon: 'ph-pencil-simple', label: 'Edit profile' },
    { icon: 'ph-sign-out', label: 'Logout' }
  ]"
/&gt;</code></pre>
	</div>
</section>