Home
001 - Basic
002 - Variables
003 - Layer
🔥 004 - Nested Rules
010 - Grid
011 - Grid Complex
012 - Grid Contents
013 - Grid Logos
014 - Grid Spanning
020 - Container
021 - Container Style Queries
030 - Focus Visible
031 - Focus Within
040 - Color Scheme
🔥 041 - Color Light-Dark
042 - Color Mix
043 - Color Mix Mixer
044 - Color Mix Palette
🔥 045 - Relative Color
🔥 046 - Relative Color Palette
050 - Mask Image
051 - Background Clip Text
060 - Accent Color
070 - Has
🔥 071 - Starting Style
🔥 072 - Transition Behavior
090 - Text Wrap
🔥 100 - Popover
🔥 110 - scroll-driven animations
999 - Playground
Loading ...
CSS
@layer layout, theme, override; @layer theme { :root { --vcard-highlight-color: #0277bd; --vcard-highlight-bg: #03a9f4; } @media (prefers-color-scheme: dark) { :root { --vcard-highlight-color: #b3e5fc; --vcard-highlight-bg: #03a9f4; } } } @layer override { :root { --vcard-highlight-color: #7b1fa2; --vcard-highlight-bg: #9c27b0; } @media (prefers-color-scheme: dark) { :root { --vcard-highlight-color: #ce93d8; --vcard-highlight-bg: #9c27b0; } } } @layer layout { :root { --vcard-name-font-size: .75rem; --vcard-info-font-size: .75rem; --vcard-bio-font-size: .75rem; --vcard-icon-size: 1rem; --vcard-border-radius: 5px; --vcard-spacing: 1rem; --vcard-shadow: 0 0 2px 1px rgb(0 0 0 / 25%); --vcard-color: #313131; --vcard-bg: #fff; --vcard-highlight-color: #689f38; --vcard-highlight-bg: #8bc34a; } @media (prefers-color-scheme: dark) { :root { --vcard-color: #fafafa; --vcard-bg: #313131; --vcard-highlight-color: #9ccc65; --vcard-highlight-bg: #7cb342; } } } .vcard { color: var(--vcard-color); } .vcard-container { display: flex; overflow: hidden; height: 100%; box-shadow: var(--vcard-shadow); border-radius: var(--vcard-border-radius); background-color: var(--vcard-bg); flex-direction: column; } .vcard-image { display: flex; justify-content: center; align-items: center; background: var(--vcard-highlight-bg); padding: var(--vcard-spacing); height: 100px; } .vcard-image img { display: block; width: auto; max-height: 100%; max-width: 100%; border-radius: 50%; } .vcard-body { display: flex; flex-direction: column; padding: var(--vcard-spacing); gap: var(--vcard-spacing); } .vard-body > * { width: 100%; } .vcard-name { font-size: var(--vcard-name-font-size); margin-bottom: calc(var(--vcard-name-font-size) / 2); line-height: 1.25; font-weight: bold; } .vcard-info { font-size: var(--vcard-info-font-size); line-height: 1.25; color: var(--vcard-highlight-color); } .vcard-bio { display: none; font-size: var(--vcard-bio-font-size); } .vcard-social { margin-top: auto; display: flex; gap: calc(var(--vcard-icon-size) / 2); } .vcard-social a { display: flex; justify-content: center; align-items: center; color: var(--vcard-highlight-color); } .vcard-icon { display: inline-block; height: var(--vcard-icon-size); width: var(--vcard-icon-size); fill: currentColor; } @media (min-width: 250px) { :root { --vcard-spacing: 1.25rem; --vcard-name-font-size: 1.2rem; --vcard-info-font-size: 1rem; --vcard-icon-size: 1.25rem; } .vcard-image { height: 150px; } .vcard-bio { display: block; } } @media (min-width: 500px) { :root { --vcard-spacing: 1.5rem; --vcard-name-font-size: 1.5rem; --vcard-bio-font-size: 1rem; --vcard-icon-size: 1.5rem; } .vcard-container { flex-direction: row; } .vcard-image { width: 200px; flex-shrink: 0; height: auto; padding: 0; } .vcard-image img { object-fit: cover; width: 100%; height: 100%; border-radius: 0; } }
HTML
<div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=7" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Damian Gastelun</div> <div class="vcard-info"> <div class="vcard-job">Web Designer</div> <div class="vcard-location">Kassel, Germany</div> </div> </div> <div class="vcard-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales molestie eros, vitae hendrerit massa aliquet ut. Vivamus felis magna, accumsan vel lorem ac, porta facilisis ligula. Vivamus in tincidunt metus. Suspendisse eu molestie quam. Mauris fringilla metus vitae nibh tempus ultricies. Suspendisse lacinia diam eu mi consequat condimentum.</div> <div class="vcard-social"> <a href="#"> <svg class="vcard-icon" role="img"> <use href="/assets/actions.svg#actions-brand-twitter" /> </svg> </a> <a href="#"> <svg class="vcard-icon" role="img"> <use href="/assets/actions.svg#actions-brand-facebook" /> </svg> </a> <a href="#"> <svg class="vcard-icon" role="img"> <use href="/assets/actions.svg#actions-brand-instagram" /> </svg> </a> </div> </div> </div> </div>
-a
+A
Off
1/2
1/1
2/1
Zoom
Document
Container