Modern CSS Demos

Loading ...

@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 {
    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;
}
.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;
}
@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;
    }
}

<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>

Zoom

Document

Container