Bootstrap UI Kit

Simple Circular Grid

Marcus Johnson

CEO

David Park

CTO

Ali Khan

Design Lead

Robert Chen

Developer

<div class="uk-tg-grid">
    <div class="uk-tg-item">
        <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=200&q=80" alt="Marcus" class="uk-tg-img">
        <div class="uk-tg-name">Marcus Johnson</div>
        <div class="uk-tg-role">CEO</div>
    </div>
</div>

<style>
    .uk-tg-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 2rem;
        text-align: center;
    }
    .uk-tg-img {
        width: 96px; height: 96px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 1rem;
        background: #e2e8f0;
    }
    .uk-tg-name {
        font-weight: 700; color: #0b1b2f; font-size: 0.95rem;
    }
    .uk-tg-role {
        font-size: 0.75rem; color: #94a3b8; margin-top: 2px;
    }
</style>

Hover Reveal Grid

<div class="uk-tg-hover-card">
    <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=400&q=80" alt="James">
    <div class="uk-tg-hover-overlay">
        <div class="uk-tg-hover-name">James Wilson</div>
        <div class="uk-tg-hover-role">Engineering</div>
    </div>
</div>

<style>
    .uk-tg-hover-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    .uk-tg-hover-card {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        cursor: pointer;
    }
    .uk-tg-hover-card img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.4s;
    }
    .uk-tg-hover-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(11,27,47,0.95), transparent);
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .uk-tg-hover-card:hover .uk-tg-hover-overlay { opacity: 1; }
    .uk-tg-hover-card:hover img { transform: scale(1.05); }
</style>

Bordered Profile Cards

Alexander Wang

Head of Sales

San Francisco

Samuel Lee

Support Lead

New York

<div class="uk-tg-card">
    <img src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=400&q=80" alt="Alexander" class="uk-tg-card-img">
    <div class="uk-tg-card-body">
        <div class="uk-tg-card-name">Alexander Wang</div>
        <div class="uk-tg-card-role">Head of Sales</div>
    </div>
</div>

<style>
    .uk-tg-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
        text-align: center;
    }
    .uk-tg-card-img {
        width: 100%; height: 240px;
        object-fit: cover;
        border-bottom: 1px solid #e2e8f0;
    }
    .uk-tg-card-body { padding: 1.5rem; }
</style>

Masonry Avatar Grid

Liam Neeson

Ethan Hunt

Jason Bourne

<div class="uk-tg-masonry">
    <div class="uk-tg-ms-item col-span-2 row-span-2">
        <img src="https://images.unsplash.com/photo-1504593811423-6dd665756598?auto=format&fit=crop&w=600&q=80" alt="Liam">
        <div class="uk-tg-ms-name">Liam Neeson</div>
    </div>
</div>

<style>
    .uk-tg-masonry {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
        gap: 0.75rem;
    }
    .uk-tg-ms-item {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
    }
    .uk-tg-ms-item.col-span-2 { grid-column: span 2; }
    .uk-tg-ms-item.row-span-2 { grid-row: span 2; }
    .uk-tg-ms-item img {
        width: 100%; height: 100%; object-fit: cover;
    }
</style>

Minimal Team List

Michael Scott

Regional Manager

Jim Halpert

Sales Rep

Dwight Schrute

Assistant to the RM

<div class="uk-tg-list-item">
    <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&q=80" class="uk-tg-list-img">
    <div class="uk-tg-list-info">
        <div class="uk-tg-list-name">Michael Scott</div>
        <div class="uk-tg-list-role">Regional Manager</div>
    </div>
</div>

<style>
    .uk-tg-list-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f1f5f9;
    }
    .uk-tg-list-img {
        width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    }
</style>

Team Grids