users cards

src/pages/users.html

@@ -8,48 +8,35 @@ menu: extra.users
 ---
 
 <div class="row row-cards">
-   {% for person in site.data.people limit: 18 %}
-   {% assign progress = forloop.index | random_number: 4, 95 %}
-   {% assign online_counter = forloop.index | random_number: 1, 10 %}
-   <div class="col-md-6 col-lg-4">
-      <div class="card">
-         <div class="card-body">
-            <div class="row g-2 align-items-center">
-               <div class="col-auto">
-                  {% include ui/avatar.html person=person %}
-               </div>
-               <div class="col">
-                  <h3 class="mb-0"><a href="#">{{ person.full_name }}</a></h3>
-                  <div class="text-muted text-h5">{{ person.job_title }}</div>
-               </div>
+	{% for person in site.data.people limit: 18 %}
+	{% assign progress = forloop.index | random_number: 4, 95 %}
+	{% assign online_counter = forloop.index | random_number: 1, 10 %}
+	<div class="col-md-6 col-lg-3">
+		<div class="card">
+			<div class="card-body p-4 text-center">
+				{% include ui/avatar.html size="xl" rounded=true person=person class="mb-3" %}
+				<h3 class="m-0 mb-1"><a href="#">{{ person.full_name }}</a></h3>
+				<div class="text-muted">{{ person.job_title }}</div>
 
-               {% if online_counter > 7 %}
-                  <div class="col-auto lh-1 align-self-start">
-                     {% include ui/badge.html text="online" color="green-lt" %}
-                  </div>
-               {% elsif online_counter > 5 %}
-               <div class="col-auto lh-1 align-self-start">
-                  {% include ui/badge.html text="offline" color="gray-lt" %}
-               </div>
-               {% endif %}
-            </div>
-            <div class="row align-items-center mt-4">
-               <div class="col">
-                  {% include ui/progress-description.html value=progress label="Progress" %}
-               </div>
-               <div class="col-auto">
-                  <div class="btn-list">
-                     {% include ui/button.html text="Chat" color="white" size="sm" %}
-                     {% include ui/button.html text="Profile" color="white" size="sm" %}
-                  </div>
-               </div>
-            </div>
-         </div>
-      </div>
-   </div>
-   {% endfor %}
+				<div class="mt-3">
+					{% if forloop.index == 1 %}
+						<span class="badge bg-purple-lt">Owner</span>
+					{% elsif forloop.index < 5 %}
+						<span class="badge bg-green-lt">Admin</span>
+					{% else %}
+						<span class="badge bg-muted-lt">User</span>
+					{% endif %}
+				</div>
+			</div>
+			<div class="d-flex">
+				<a href="#" class="card-btn">{% include ui/icon.html icon="mail" color="muted" class="me-2" %} Email</a>
+				<a href="#" class="card-btn">{% include ui/icon.html icon="phone" color="muted" class="me-2" %} Call</a>
+			</div>
+		</div>
+	</div>
+	{% endfor %}
 </div>
 
 <div class="d-flex mt-4">
-   {% include ui/pagination.html class="ms-auto" %}
+	{% include ui/pagination.html class="ms-auto" %}
 </div>

src/scss/ui/_cards.scss

@@ -79,15 +79,25 @@
 }
 
 .card-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: $card-spacer-y $card-spacer-x;
   text-align: center;
-  background: rgba($primary, .02);
   transition: .3s background;
+  border-top: 1px solid $border-color;
+  flex: 1;
+  color: inherit;
+  font-weight: $font-weight-medium;
 
   &:hover {
     text-decoration: none;
     background: $active-bg;
   }
+
+  &:not(:first-child) {
+    border-left: 1px solid $border-color;
+  }
 }
 
 .card-stacked {