profile cards

pages/_data/menu.yml

@@ -106,6 +106,9 @@ extra:
     blog:
       title: Blog cards
       url: blog.html
+    snippets:
+      title: Snippets
+      url: snippets.html
     search-results:
       title: Search results
       url: search-results.html

pages/_includes/cards/profile.html

@@ -1,8 +1,5 @@
-<div class="card card-profile">
-   <div class="card-header" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[22].file }});"></div>
+<div class="card">
    <div class="card-body text-center">
-      <img class="card-profile-img" src="{{ site.data.people[4].photo }}">
-
       <h2 class="mb-3">{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}</h2>
 
       <p class="mb-4">

pages/snippets.html

@@ -2,6 +2,7 @@
 title: Snippets
 page-title: Snippets
 page-title-right: date
+menu: extra.snippets
 ---
 
 <div class="row">

pages/tmp.html

@@ -7,8 +7,13 @@ menu: a.b.c
 	<div class="col-md-6 col-xl-4">
 		{% assign person = site.data.people[0] %}
 		<div class="card">
-			<div class="card-body">
-				<h3 class="card-title">{{ person.full_name }}</h3>
+			<div class="card-img-top embed-responsive embed-responsive-21by9">
+				<div class="embed-responsive-item bg-cover" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></div>
+			</div>
+			{% include ui/avatar.html person=person size="xl" class="mt-n5 mx-auto card-avatar" %}
+			<div class="card-body text-center">
+				<h2 class="mb-3">{{ person.full_name }}</h2>
+				<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam atque autem consectetur dignissimos ea error exercitationem id, maxime minus mollitia nulla quasi quia quisquam sed tempora ut voluptas, voluptatem!</p>
 			</div>
 		</div>
 		{% include cards/user-info.html %}