Skip to content

Commit fbf0a06

Browse files
shadowcodexshadowcodex
committed
added team card, three additional team card alternatives, and a multi team card layout
1 parent ff60061 commit fbf0a06

6 files changed

+570
-2
lines changed

‎components.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,22 @@
1313
<li><a href="panel/">Panel</a> - A representation of the old bootstrap 3 panels.</li>
1414
<li><a href="pricing-table/">Pricing Table</a> - A pricing table using bootstrap 4 cards.</li>
1515
<li><a href="pricing-table-alternative/">Pricing Table Alternative</a> - A pricing table using bootstrap 4 cards. (Alternative Design)</li>
16+
<li><a href="team-member-profile-card/">Team Member Profile Card</a> - Display a synopsis of information for team members.</li>
17+
<li><a href="team-member-profile-card-alternative/">Team Member Profile Card Alternative</a> - Display a synopsis of information for team members. (Alternative Design)</li>
18+
<li><a href="team-member-profile-card-alternative-2/">Team Member Profile Card Alternative 2</a> - Display a synopsis of information for team members. (Alternative Design 2)</li>
19+
<li><a href="team-member-profile-card-alternative-3/">Team Member Profile Card Alternative 3</a> - Display a synopsis of information for team members. (Alternative Design 3)</li>
20+
<li><a href="team-member-multi-profile-card/">Team Member Profile Multi-Card Layout</a> - Display your team cards in a multi-card presentation.</li>
1621
</ul>
1722
<p>Todo:</p>
1823
<ul>
1924
<li>Article Card</li>
2025
<li>Article Card w/image</li>
26+
<li>Blurb</li>
2127
<li>Login Box with Verbage</li>
2228
<li>Login Box with Social Login Options</li>
2329
<li>Reset Password Box</li>
2430
<li>Sign Up Box</li>
2531
<li>Newsletter Subscribe Tile</li>
26-
<li>Team Member Profile Card</li>
27-
<li>Team Member Profile Card w/image</li>
2832
<li>Contact Form Box</li>
2933
<li>Vertical Navigation Bar</li>
3034
</ul>

‎components/team-member-multi-profile-cards.html‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
---
2+
title: 'Team Member Profile Multi-Card Layout'
3+
description: 'Display your team cards in a multi-card presentation.'
4+
permalink: '/components/team-member-multi-profile-card/'
5+
layout: component
6+
---
7+
<div class="row">
8+
<div class="col">
9+
<div class="card-deck">
10+
<div class="card bg-dark text-white">
11+
<!-- Heading Area (name/title) -->
12+
<div class="card-body">
13+
<div class="row">
14+
<div class="col text-center">
15+
<h2 class="display-4">John Doe</h2>
16+
<p>Position or Title</p>
17+
</div>
18+
</div>
19+
</div>
20+
<!-- Description Area (skills and social links) -->
21+
<div class="card-body">
22+
<div class="row">
23+
<div class="col">
24+
Skill 1 / Skill 2 / Skill 3 / Skill 4
25+
<div class="progress">
26+
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
27+
<div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
28+
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
29+
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="card-body text-center">
35+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
36+
</div>
37+
</div>
38+
<div class="card bg-dark text-white">
39+
<!-- Heading Area (name/title) -->
40+
<div class="card-body">
41+
<div class="row">
42+
<div class="col text-center">
43+
<h2 class="display-4">John Doe</h2>
44+
<p>Position or Title</p>
45+
</div>
46+
</div>
47+
</div>
48+
<!-- Description Area (skills and social links) -->
49+
<div class="card-body">
50+
<div class="row">
51+
<div class="col">
52+
Skill 1
53+
<div class="progress">
54+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
55+
</div>
56+
</div>
57+
</div>
58+
<div class="row">
59+
<div class="col">
60+
Skill 2
61+
<div class="progress">
62+
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
63+
</div>
64+
</div>
65+
</div>
66+
<div class="row">
67+
<div class="col">
68+
Skill 3
69+
<div class="progress">
70+
<div class="progress-bar bg-warning" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
71+
</div>
72+
</div>
73+
</div>
74+
<div class="row">
75+
<div class="col">
76+
Skill 4
77+
<div class="progress">
78+
<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<div class="card-body text-center">
84+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
85+
</div>
86+
</div>
87+
<div class="card bg-dark text-white">
88+
<!-- Heading Area (image and name/title) -->
89+
<div class="card-body">
90+
<div class="row">
91+
<div class="col">
92+
<img src="http://placekitten.com/201/201" alt="user team member profile image" class="img-fluid rounded-circle mx-auto d-block">
93+
</div>
94+
</div>
95+
<div class="row">
96+
<div class="col text-center">
97+
<h2 class="display-4">John Doe</h2>
98+
<p>Position or Title</p>
99+
</div>
100+
</div>
101+
</div>
102+
<!-- Description Area (skills and social links) -->
103+
<div class="card-body">
104+
<div class="row">
105+
<div class="col text-center">
106+
<p>Skill 1 / Skill 2 / Skill 3 / Skill 4</p>
107+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
<br>
116+
<p>Code:</p>
117+
{% highlight html %}
118+
<div class="row">
119+
<div class="col">
120+
<div class="card-deck">
121+
<div class="card bg-dark text-white">
122+
<!-- Heading Area (name/title) -->
123+
<div class="card-body">
124+
<div class="row">
125+
<div class="col text-center">
126+
<h2 class="display-4">John Doe</h2>
127+
<p>Position or Title</p>
128+
</div>
129+
</div>
130+
</div>
131+
<!-- Description Area (skills and social links) -->
132+
<div class="card-body">
133+
<div class="row">
134+
<div class="col">
135+
Skill 1 / Skill 2 / Skill 3 / Skill 4
136+
<div class="progress">
137+
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
138+
<div class="progress-bar bg-primary" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
139+
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
140+
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="card-body text-center">
146+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
147+
</div>
148+
</div>
149+
<div class="card bg-dark text-white">
150+
<!-- Heading Area (name/title) -->
151+
<div class="card-body">
152+
<div class="row">
153+
<div class="col text-center">
154+
<h2 class="display-4">John Doe</h2>
155+
<p>Position or Title</p>
156+
</div>
157+
</div>
158+
</div>
159+
<!-- Description Area (skills and social links) -->
160+
<div class="card-body">
161+
<div class="row">
162+
<div class="col">
163+
Skill 1
164+
<div class="progress">
165+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
166+
</div>
167+
</div>
168+
</div>
169+
<div class="row">
170+
<div class="col">
171+
Skill 2
172+
<div class="progress">
173+
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
174+
</div>
175+
</div>
176+
</div>
177+
<div class="row">
178+
<div class="col">
179+
Skill 3
180+
<div class="progress">
181+
<div class="progress-bar bg-warning" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
182+
</div>
183+
</div>
184+
</div>
185+
<div class="row">
186+
<div class="col">
187+
Skill 4
188+
<div class="progress">
189+
<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
190+
</div>
191+
</div>
192+
</div>
193+
</div>
194+
<div class="card-body text-center">
195+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
196+
</div>
197+
</div>
198+
<div class="card bg-dark text-white">
199+
<!-- Heading Area (image and name/title) -->
200+
<div class="card-body">
201+
<div class="row">
202+
<div class="col">
203+
<img src="http://placekitten.com/201/201" alt="user team member profile image" class="img-fluid rounded-circle mx-auto d-block">
204+
</div>
205+
</div>
206+
<div class="row">
207+
<div class="col text-center">
208+
<h2 class="display-4">John Doe</h2>
209+
<p>Position or Title</p>
210+
</div>
211+
</div>
212+
</div>
213+
<!-- Description Area (skills and social links) -->
214+
<div class="card-body">
215+
<div class="row">
216+
<div class="col text-center">
217+
<p>Skill 1 / Skill 2 / Skill 3 / Skill 4</p>
218+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
219+
</div>
220+
</div>
221+
</div>
222+
</div>
223+
</div>
224+
</div>
225+
</div>
226+
{% endhighlight %}

‎components/team-member-profile-card-alternative-2.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
title: 'Team Member Profile Card Alternative 2'
3+
description: 'Display a synopsis of information for team members. (Alternative Design 2)'
4+
permalink: '/components/team-member-profile-card-alternative-2/'
5+
layout: component
6+
---
7+
<div class="row justify-content-md-center">
8+
<div class="col-lg-4 col-md-6">
9+
<div class="card bg-dark text-white">
10+
<!-- Heading Area (name/title) -->
11+
<div class="card-body">
12+
<div class="row">
13+
<div class="col text-center">
14+
<h2 class="display-4">John Doe</h2>
15+
<p>Position or Title</p>
16+
</div>
17+
</div>
18+
</div>
19+
<!-- Description Area (skills and social links) -->
20+
<div class="card-body">
21+
<div class="row">
22+
<div class="col">
23+
Skill 1
24+
<div class="progress">
25+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
26+
</div>
27+
</div>
28+
</div>
29+
<div class="row">
30+
<div class="col">
31+
Skill 2
32+
<div class="progress">
33+
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
34+
</div>
35+
</div>
36+
</div>
37+
<div class="row">
38+
<div class="col">
39+
Skill 3
40+
<div class="progress">
41+
<div class="progress-bar bg-warning" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="row">
46+
<div class="col">
47+
Skill 4
48+
<div class="progress">
49+
<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="card-body text-center">
55+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
56+
</div>
57+
</div>
58+
</div>
59+
</div>
60+
<p>Code:</p>
61+
{% highlight html %}
62+
<div class="row justify-content-md-center">
63+
<div class="col-lg-4 col-md-6">
64+
<div class="card bg-dark text-white">
65+
<!-- Heading Area (name/title) -->
66+
<div class="card-body">
67+
<div class="row">
68+
<div class="col text-center">
69+
<h2 class="display-4">John Doe</h2>
70+
<p>Position or Title</p>
71+
</div>
72+
</div>
73+
</div>
74+
<!-- Description Area (skills and social links) -->
75+
<div class="card-body">
76+
<div class="row">
77+
<div class="col">
78+
Skill 1
79+
<div class="progress">
80+
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
81+
</div>
82+
</div>
83+
</div>
84+
<div class="row">
85+
<div class="col">
86+
Skill 2
87+
<div class="progress">
88+
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
89+
</div>
90+
</div>
91+
</div>
92+
<div class="row">
93+
<div class="col">
94+
Skill 3
95+
<div class="progress">
96+
<div class="progress-bar bg-warning" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
97+
</div>
98+
</div>
99+
</div>
100+
<div class="row">
101+
<div class="col">
102+
Skill 4
103+
<div class="progress">
104+
<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
<div class="card-body text-center">
110+
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
{% endhighlight %}
116+
<hr>
117+
<br>

0 commit comments

Comments
 (0)