Modern CSS Demos

Loading ...

:root {
    --context-padding: 2rem;
    --context-bg: light-dark(#dadada, #111111);
    --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);
}

.context {
    padding: var(--context-padding);
    background-color: var(--context-bg);
    border-radius: calc((var(--context-padding) + var(--vcard-border-radius)) / 2);
}

.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 id="context" class="context">
    <div id="card">
        <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>
</div>

<div class="form">
    <div class="form-section">
        <label for="colorSchemeContext">context color-scheme:</label>
        <select id="colorSchemeContext"
            data-trigger="change"
            data-target="#context"
            data-property="color-scheme"
            >
                            <option value=""></option>
                            <option value="normal">normal</option>
                            <option value="light only">light only</option>
                            <option value="dark only">dark only</option>
                            <option value="light dark">light dark</option>
                    </select>
    </div>
    <div class="form-section">
        <label for="colorSchemeCard">card color-scheme:</label>
        <select id="colorSchemeCard"
            data-trigger="change"
            data-target="#card"
            data-property="color-scheme"
            >
                            <option value=""></option>
                            <option value="normal">normal</option>
                            <option value="light only">light only</option>
                            <option value="dark only">dark only</option>
                            <option value="light dark">light dark</option>
                    </select>
    </div>
</div>

Zoom

Document

Container