mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
feat: Add card gradients page and gradient card components (#2554)
This commit is contained in:
Paweł Kuna
GitHub
@@ -105,6 +105,11 @@
|
||||
"title": "Card actions",
|
||||
"badge": "New"
|
||||
},
|
||||
"gradients": {
|
||||
"url": "card-gradients.html",
|
||||
"title": "Card gradients",
|
||||
"badge": "New"
|
||||
},
|
||||
"masonry": {
|
||||
"url": "cards-masonry.html",
|
||||
"title": "Cards Masonry"
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
{
|
||||
"css": "sha384-b08Yxo9kzlsLLcHA4bMBkC8EAIBeP3G8rhhIT584owzLn88bcWJkSVtGZMc78Rax",
|
||||
"css-rtl": "sha384-EVH/sV9+QVa/y7Vl1JFsVYjru0/gKkqDf8zBqdfu2R8t84BwCBeV7jsu7kQ93abg",
|
||||
"css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
|
||||
"css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
|
||||
"css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
|
||||
"css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
|
||||
"css": "sha384-8CTJ1aEYI+cbgqgYVub8YVfKOnKa/men0DZ4qZqmwvgzNGG1/anW0L4o7/8G171h",
|
||||
"css-rtl": "sha384-c4pkMIjCDw9LwOOYLU2NkDMg4rsDpqEj+xqDXhrTVRtDiAvk2083ZRDsxMOl9Qpw",
|
||||
"css-flags": "sha384-Z+NVuLczJm4wqbXhRrVWeCqKJzY3VmwtOZTMpek7tjmZJU9Yqu+6F7aPT0KDBTvS",
|
||||
"css-flags-rtl": "sha384-9zdt+TQAk+aAdQAyWQ158584Cr9KDLcgJMDG5iDvrYE2Ha/sZdG6l3FcjWyHAFx8",
|
||||
"css-marketing": "sha384-O1oTT08rQgRZEq0WgPfYFyGadtTu90+tM9zTv+9yYv1qgNw8ldbGTr6levIIXXNl",
|
||||
"css-marketing-rtl": "sha384-jU6iDpXSyHHkiqBvDtPRuDWr+4ccgr3SNjNYMN0FtyaDaIi4Qe6WNn5Ir1+jr/aZ",
|
||||
"css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
|
||||
"css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
|
||||
"css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
|
||||
"css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
|
||||
"css-props": "sha384-HpzBfAj1xJcNLtdedYZunJBHqgdO12KqrCrc6/7pmKDiP8YmUF71cm+iGBtVawWM",
|
||||
"css-props-rtl": "sha384-/vKK+yuQsAI8lJmR4uothydKQAHFK+fp1QrbJnfk2deAzII9WUj3h5rXUxZPyUAo",
|
||||
"css-props": "sha384-41GCSlvwCdfsb6AHZx7QXQq17CAqXvvToJCecMxqvUUsap3aYqIvR3ARxb5ug/o7",
|
||||
"css-props-rtl": "sha384-JgFdeK5dAxT/nZPtUTt3cnBng9TLxoF6ZetumffFIzqF/4XXLEQIemFDshpleF/f",
|
||||
"css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
|
||||
"css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
|
||||
"css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
|
||||
"css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
|
||||
"js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
|
||||
"css-vendors-rtl": "sha384-fHhTRXlGYaUjLAbSnADjVs2DrSBSKbnTDhjiOgVT0+aWDjKbwtPZU6y54bLo2FCm",
|
||||
"css-vendors": "sha384-9R1luLy+gN6Ob3LEWsGiGo3nyPVDzVGyEBcDlat6sH2lF7zHZhnpDILTEgEvalsh",
|
||||
"js": "sha384-dUqGQ2Iu2WGMnF+glqmZxV78vxbRuwGaM3diaq+Wp0a6mek1k5samXVe60XqZcTT",
|
||||
"js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
|
||||
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
|
||||
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% assign width = include.width | default: 400 %}
|
||||
{% assign height = include.height | default: 200 %}
|
||||
<div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %}
|
||||
<div class="card-body{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100 border rounded" %}
|
||||
</div>
|
||||
13
shared/includes/cards/charts/active-users-2.html
Normal file
13
shared/includes/cards/charts/active-users-2.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="subheader">Active Users</div>
|
||||
<div class="d-flex align-items-baseline mb-2">
|
||||
<div class="h1 mb-0 me-2">25,782</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=-1 %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
12
shared/includes/cards/charts/social-referrals.html
Normal file
12
shared/includes/cards/charts/social-referrals.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<h3 class="card-title">Social referrals</h3>
|
||||
<div class="ms-auto">
|
||||
{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
14
shared/includes/cards/charts/total-users.html
Normal file
14
shared/includes/cards/charts/total-users.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="subheader">Total Users</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-0 me-2">75,782</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=2 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-secondary mt-2">24,635 users increased from last month</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="visitors" height="6" %}
|
||||
</div>
|
||||
|
||||
12
shared/includes/cards/delete-confirm.html
Normal file
12
shared/includes/cards/delete-confirm.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card card-gradient card-gradient-danger">
|
||||
<div class="card-body p-5 text-center">
|
||||
<h3 class="card-title">Are you sure to delete this card?</h3>
|
||||
<p class="text-secondary">If you delete this card, you will not be able to recover it.</p>
|
||||
|
||||
<div class="btn-list btn-list-center mt-5">
|
||||
{% include "ui/button.html" text="Yes, delete it" color="danger" %}
|
||||
{% include "ui/button.html" text="Cancel" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
12
shared/includes/cards/happy-birthday.html
Normal file
12
shared/includes/cards/happy-birthday.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card card-gradient card-gradient-rainbow">
|
||||
<div class="card-body text-center p-5">
|
||||
<div class="display-5 leading-none mb-2">🍾 🎉</div>
|
||||
<h1>Happy Birthday, Andrew!</h1>
|
||||
<p class="text-secondary">We truly hope your day is brimming with joy, laughter, and countless moments that bring a smile to your face!</p>
|
||||
<p class="text-secondary">To celebrate your special day, here's a discount code just for you: <strong class="text-body">NWYR20</strong>. Enjoy <strong class="text-body">20% off</strong> your next purchase!</p>
|
||||
<div class="mt-5">
|
||||
{% include "ui/button.html" text="Grab my special deal" icon="gift" color="primary" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
37
shared/includes/cards/pricing-plan.html
Normal file
37
shared/includes/cards/pricing-plan.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<div class="card card-gradient card-gradient-love">
|
||||
<div class="ribbon bg-pink">
|
||||
Featured
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="h-subheader text-pink">
|
||||
Professional
|
||||
</div>
|
||||
<div class="d-flex align-items-baseline mt-5">
|
||||
<div class="display-5">$199</div>
|
||||
<div class="fs-1 text-secondary">/ month</div>
|
||||
</div>
|
||||
<ul class="list-unstyled mt-6 space-y space-y-2">
|
||||
<li class="d-flex gap-2">
|
||||
<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
|
||||
<div><strong>Unlimited</strong> Target Audience</div>
|
||||
</li>
|
||||
<li class="d-flex gap-2">
|
||||
<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
|
||||
<div><strong>1</strong> User Account</div>
|
||||
</li>
|
||||
<li class="d-flex gap-2">
|
||||
<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
|
||||
<div><strong>100+</strong> Video Tuts</div>
|
||||
</li>
|
||||
<li class="d-flex gap-2">
|
||||
<div>{% include "ui/icon.html" icon="x" color="secondary" %}</div>
|
||||
<div class="text-secondary">Public Displays</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-4 text-muted">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
|
||||
<div class="mt-6">
|
||||
{% include "ui/button.html" text="Purchase Now" color="pink" block %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
20
shared/includes/cards/profile-contact.html
Normal file
20
shared/includes/cards/profile-contact.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{% assign person = include.person | default: people[1] %}
|
||||
<div class="card card-gradient card-gradient-{{ include.color | default: 'yellow' }}">
|
||||
<div class="card-body text-center py-6">
|
||||
<div class="position-absolute top-0 end-0 p-1">
|
||||
<div class="btn btn-action">{% include "ui/icon.html" icon="star" color="yellow" type="filled" %}</div>
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/avatar.html" size="2xl" person=person shape="rounded-circle" %}
|
||||
</div>
|
||||
<div class="h1 mt-4 mb-1">{{ person.full_name }}</div>
|
||||
<div class="text-secondary">{{ person.job_title }}</div>
|
||||
|
||||
<div class="btn-list justify-content-center mt-3">
|
||||
<a href="#" class="btn btn-icon btn-pill" title="Message" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="message" %}</a>
|
||||
<a href="#" class="btn btn-icon btn-pill" title="Phone" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="phone" %}</a>
|
||||
<a href="#" class="btn btn-icon btn-pill" title="Email" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="mail" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% assign chart-type = include.chart-type | default: 'line' %}
|
||||
{% assign chart-position = include.chart-position | default: 'right' %}
|
||||
<div class="card card-sm">
|
||||
<div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
{% if include.icon %}
|
||||
|
||||
23
shared/includes/cards/stat-gradient.html
Normal file
23
shared/includes/cards/stat-gradient.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% assign card-color = include.color | default: 'primary' %}
|
||||
{% assign card-icon = include.icon | default: 'trending-up' %}
|
||||
{% assign card-title = include.title | default: 'Total' %}
|
||||
{% assign card-value = include.value | default: '0' %}
|
||||
{% assign card-progress = include.progress | default: 0 %}
|
||||
|
||||
<div class="card card-gradient card-gradient-{{ card-color }} card-gradient-start">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col">
|
||||
<h4 class="subheader mb-1">{{ card-title }}</h4>
|
||||
<div class="h3 m-0">{{ card-value }}</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon=card-icon color=card-color %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "ui/progress.html" value=card-progress color=card-color size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
33
shared/includes/cards/storage-usage.html
Normal file
33
shared/includes/cards/storage-usage.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
|
||||
<div class="progress progress-separated mb-3">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto d-flex align-items-center pe-2">
|
||||
<span class="legend me-2 bg-primary"></span>
|
||||
<span>Regular</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
|
||||
</div>
|
||||
<div class="col-auto d-flex align-items-center px-2">
|
||||
<span class="legend me-2 bg-info"></span>
|
||||
<span>System</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
|
||||
</div>
|
||||
<div class="col-auto d-flex align-items-center px-2">
|
||||
<span class="legend me-2 bg-success"></span>
|
||||
<span>Shared</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
|
||||
</div>
|
||||
<div class="col-auto d-flex align-items-center ps-2">
|
||||
<span class="legend me-2"></span>
|
||||
<span>Free</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-4 text-center">
|
||||
<img src="{{ page | relative }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
|
||||
<img src="{{ page | relative }}/static/products/{{ product.image }}" alt="{{ product.name }}" class="img-fluid">
|
||||
</div>
|
||||
<h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
|
||||
<div class="mt-5 d-flex align-items-center">
|
||||
@@ -11,7 +11,7 @@
|
||||
<strong>{{ product.price }}</strong>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='plus' %} Add to cart</a>
|
||||
<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='shopping-cart' %} Buy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
14
shared/includes/cards/success-message.html
Normal file
14
shared/includes/cards/success-message.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="card card-gradient card-gradient-success">
|
||||
<div class="card-body p-5 text-center">
|
||||
<div class="mb-3">
|
||||
{% include "ui/icon.html" icon="circle-check" class="icon-lg" color="success" %}
|
||||
</div>
|
||||
<h3 class="card-title">Success!</h3>
|
||||
<p class="text-secondary">Your changes have been saved successfully.</p>
|
||||
|
||||
<div class="btn-list btn-list-center mt-5">
|
||||
{% include "ui/button.html" text="Continue" color="success" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
24
shared/includes/cards/weather.html
Normal file
24
shared/includes/cards/weather.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{% assign icon = include.icon | default: 'cloud-rain' %}
|
||||
<div class="card card-gradient card-gradient-{{ include.color | default: 'blue' }} card-gradient-end">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<h3 class="card-title mb-2">{{ include.city | default: 'Warsaw' }}</h3>
|
||||
</div>
|
||||
<div class="col">
|
||||
{% include "ui/icon.html" icon=icon %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-secondary">
|
||||
{{ include.description | default: 'Cloudy morning' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="display-5 lh-1 fw-lighter">{{ include.temperature | default: 20 }}°</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="card">
|
||||
<div class="card card-gradient">
|
||||
<div class="card-body">
|
||||
<div class="row gy-3">
|
||||
<div class="col-12 col-sm d-flex flex-column">
|
||||
<h3 class="h2">Welcome back, Paweł</h3>
|
||||
<p class="text-muted">You have 5 new messages and 2 new notifications.</p>
|
||||
<p class="text-secondary">You have 5 new messages and 2 new notifications.</p>
|
||||
|
||||
<div class="row g-5 mt-auto">
|
||||
<div class="col-auto">
|
||||
|
||||
11
shared/includes/cards/you-win.html
Normal file
11
shared/includes/cards/you-win.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<div class="card card-gradient card-gradient-gold">
|
||||
<div class="card-body text-center p-5">
|
||||
<div class="display-3 leading-none mb-2">🏆</div>
|
||||
<h1>You are winner!</h1>
|
||||
<p class="text-secondary">You've been selected as our lucky winner for completing <strong class="text-body">100 orders</strong> this month! Click below to claim your exclusive prize and enjoy the benefits!</p>
|
||||
<div class="mt-5">
|
||||
{% include "ui/button.html" text="Claim Your Prize" icon="gift" color="primary" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,33 +3,10 @@
|
||||
{% include "cards/welcome.html" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="subheader">Total Users</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h1 mb-0 me-2">75,782</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=2 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-secondary mt-2">24,635 users increased from last month</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="visitors" height="6" %}
|
||||
</div>
|
||||
{% include "cards/charts/total-users.html" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="subheader">Active Users</div>
|
||||
<div class="d-flex align-items-baseline mb-2">
|
||||
<div class="h1 mb-0 me-2">25,782</div>
|
||||
<div class="me-auto">
|
||||
{% include "ui/trending.html" value=-1 %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/charts/active-users-2.html" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include "cards/charts/sales.html" %}
|
||||
@@ -97,38 +74,7 @@
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
|
||||
<div class="progress progress-separated mb-3">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto d-flex align-items-center pe-2">
|
||||
<span class="legend me-2 bg-primary"></span>
|
||||
<span>Regular</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
|
||||
</div>
|
||||
<div class="col-auto d-flex align-items-center px-2">
|
||||
<span class="legend me-2 bg-info"></span>
|
||||
<span>System</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
|
||||
</div>
|
||||
<div class="col-auto d-flex align-items-center px-2">
|
||||
<span class="legend me-2 bg-success"></span>
|
||||
<span>Shared</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
|
||||
</div>
|
||||
<div class="col-auto d-flex align-items-center ps-2">
|
||||
<span class="legend me-2"></span>
|
||||
<span>Free</span>
|
||||
<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/storage-usage.html" %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include "cards/activity.html" %}
|
||||
|
||||
Reference in New Issue
Block a user