Modern CSS Demos

Loading ...

:root {
    --grid-spacing: .5rem;

--card-border-radius: 5px;
    --card-padding: 1rem;
    --card-color: #313131;
    --card-bg: #fff;
    --card-shadow: 0 0 2px 1px rgb(0 0 0 / 25%);
}

* {
    text-wrap: balance;
}

.card {
    color: var(--card-color);
    padding: var(--card-padding);
    background-color: var(--card-bg);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
}

.card h1 {
    margin: 0;
    font-size: 1.25rem;
}

.card p {
    margin-top: .25em;
    margin-bottom: 0;
}

.card-grid {
    margin: 0 auto;
    max-width: 900px;
    container-type: inline-size;
    container-name: card-grid;
    display: grid;
    gap: var(--grid-spacing);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card-section,
.card-section-cards {
    display: contents;
}

.card-section > h1 {
    margin: .5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: color-mix(in srgb, var(--card-bg), white 25%) wavy underline;
}

.card-section-a {
    --card-color: #fff;
    --card-bg: #313131;
}

.card-section-b {
    --card-color: #fff;
    --card-bg: #324e41;
}

.card-section-c {
    --card-color: #fff;
    --card-bg: #40324e;
}

<div class="card-section card-section-a">
        <h1>Pages</h1>
        <div class="card-section-cards">
            <article class="card">
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>
                    Fusce at ultrices diam. Vestibulum et risus
                    vel sapien commodo maximus. Etiam sodales,
                    dolor nec venenatis ornare, velit tortor
                    suscipit nibh, eu tincidunt urna nisl at
                    libero.
                </p>
            </article>
            <article class="card">
                <h1>Nullam volutpat sem eget</h1>
                <p>
                    Aenean fringilla sapien sem, vel ornare ex
                    pellentesque id. Vivamus scelerisque facilisis
                    felis, vitae commodo massa euismod eu.
                </p>
            </article>
        </div>
    </div>

<div class="card-section card-section-b">
        <h1>Articles</h1>
        <div class="card-section-cards">
            <article class="card">
                <h1>Vestibulum pharetra ligula vel</h1>
                <p>
                    Mauris viverra pretium commodo. Aliquam libero
                    libero, ullamcorper quis venenatis quis, volutpat
                    vitae ante.
                </p>
            </article>
            <article class="card">
                <h1>Morbi bibendum est at augue</h1>
                <p>
                    Donec pulvinar facilisis sapien, sed semper felis
                    porttitor ac. Ut feugiat aliquam neque ac posuere.
                    Fusce pellentesque, elit vel semper egestas, arcu
                    leo lacinia sapien.
                </p>
            </article>
        </div>
    </div>

<div class="card-section card-section-c">
        <h1>Other</h1>
        <div class="card-section-cards">
            <article class="card">
                <h1>Aliquam at massa a elit porttitor</h1>
                <p>
                    Duis iaculis metus nulla, nec egestas arcu fermentum
                    id. Morbi malesuada, ipsum quis pharetra interdum.
                </p>
            </article>
            <article class="card">
                <h1>Praesent sed urna suscipit</h1>
                <p>
                    Suspendisse convallis, nulla ut malesuada tincidunt,
                    ante odio ornare turpis, a scelerisque nisl neque nec
                    velit.
                </p>
            </article>
                <article class="card">
                <h1>Aliquam at massa a elit porttitor</h1>
                <p>
                    Duis iaculis metus nulla, nec egestas arcu fermentum
                    id. Morbi malesuada, ipsum quis pharetra interdum.
                </p>
            </article>
            <article class="card">
                <h1>Praesent sed urna suscipit</h1>
                <p>
                    Suspendisse convallis, nulla ut malesuada tincidunt,
                    ante odio ornare turpis, a scelerisque nisl neque nec
                    velit.
                </p>
            </article>
        </div>
    </div>
</div>

Zoom

Document

Container