An elegant luxury-inspired partner profile card component with editorial typography, premium gradients, ornamental dividers, achievement stats, and sophisticated action buttons. Perfect for agency por
1<article class="card">
2
3 <header class="header">
4 <div class="monogram">
5 <div class="monogram-mark">A</div>
6 <span class="monogram-text">Atelier · No. 07</span>
7 </div>
8 <span class="est">Est. MMXIV</span>
9 </header>
10
11 <section class="portrait-section">
12 <span class="ornament left"></span>
13 <span class="ornament right"></span>
14
15 <div class="portrait">
16 <span class="initials">SA</span>
17 </div>
18
19 <h1 class="name">Sophia <span class="name-italic">Alvarez</span></h1>
20 <p class="title">Founding Partner</p>
21
22 <p class="quote">
23 Restraint, when practiced with intention, becomes the most generous form of design.
24 </p>
25 </section>
26
27 <section class="credentials">
28 <div class="credential">
29 <div class="cred-value">128<span class="suffix">+</span></div>
30 <div class="cred-label">Commissions</div>
31 </div>
32
33 <div class="divider"></div>
34
35 <div class="credential">
36 <div class="cred-value">14<span class="suffix">yr</span></div>
37 <div class="cred-label">Practice</div>
38 </div>
39
40 <div class="divider"></div>
41
42 <div class="credential">
43 <div class="cred-value">22</div>
44 <div class="cred-label">Honours</div>
45 </div>
46 </section>
47
48 <section class="disciplines">
49 <div class="section-label">Disciplines</div>
50
51 <div class="discipline-list">
52 Brand Identity
53 <span class="sep">·</span>
54 Editorial
55 <span class="sep">·</span>
56 Art Direction
57 </div>
58 </section>
59
60 <div class="actions">
61 <button class="btn btn-primary">Request Introduction</button>
62 <button class="btn btn-secondary">Portfolio</button>
63 </div>
64
65 <footer class="footer">
66 <span class="footer-meta">Milano · Member since 2014</span>
67 <span class="signature">Sophia A.</span>
68 </footer>
69
70</article>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
11
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.