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
/** * Appear Animation for vCards */ @keyframes appear { from { scale: .85; opacity: 0; } to { scale: 1; opacity: 1; } } .vcard { animation: appear linear; animation-timeline: view(); animation-range: entry contain 25%; } /** * Reading Indicator Animation */ @keyframes readinganimation { from { width: 0; } to { width: 100%; } } .reading-indicator { z-index: 1; position: fixed; top: 0; left: 0; width: 100%; height: 2rem; background: light-dark(#cacaca, #616161); box-shadow: 0 0 3px 3px rgba(0,0,0,.25); } .reading-indicator-progress { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: light-dark(#8bc34a, #7cb342); animation: readinganimation linear; animation-timeline: scroll(); } :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: light-dark(#313131, #fafafa); --vcard-bg: light-dark(#fafafa, #313131); --vcard-highlight-color: light-dark(#689f38, #9ccc65); --vcard-highlight-bg: light-dark(#8bc34a, #7cb342); } .vcard-grid { container-name: vcard-grid; container-type: inline-size; display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 900px; margin: 2rem auto 0 auto; } .vcard { container-type: inline-size; container-name: 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; 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); > * { 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); 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; } @container vcard (min-width: 250px) { .vcard-container { --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; } } @container vcard (min-width: 500px) { .vcard-container { --vcard-spacing: 1.5rem; --vcard-name-font-size: 1.5rem; --vcard-bio-font-size: 1rem; --vcard-icon-size: 1.5rem; 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="reading-indicator"> <div class="reading-indicator-progress"></div> </div> <div class="container"> <div class="vcard-grid"> <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> <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=5" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Madelynn Burkhart</div> <div class="vcard-info"> <div class="vcard-job">Frontend Developer</div> <div class="vcard-location">Essen, 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> <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=9" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Amber Dowtin</div> <div class="vcard-info"> <div class="vcard-job">Full Stack Developer</div> <div class="vcard-location">Herne, 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> <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=11" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Arian Riesinger</div> <div class="vcard-info"> <div class="vcard-job">UI Designer</div> <div class="vcard-location">Dresden, 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> <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=14" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Karsyn Niedecken</div> <div class="vcard-info"> <div class="vcard-job">UX Designer</div> <div class="vcard-location">Erlangen, 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> <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=52" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Roger Sodawasser</div> <div class="vcard-info"> <div class="vcard-job">Content Strategist</div> <div class="vcard-location">Düsseldorf, 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> <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=8" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Gael Mieszala</div> <div class="vcard-info"> <div class="vcard-job">Web Developer</div> <div class="vcard-location">Oldenburg, 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> <div class="vcard"> <div class="vcard-container"> <div class="vcard-image"> <img src="https://i.pravatar.cc/400?img=1" width="400" height="400" loading="lazy"> </div> <div class="vcard-body"> <div class="vcard-header"> <div class="vcard-name">Evie Rhines</div> <div class="vcard-info"> <div class="vcard-job">Art Director</div> <div class="vcard-location">Frankfurt am Main, 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> </div> </div>
-a
+A
Off
1/2
1/1
2/1
Zoom
Document
Container