Bootstrap UI Kit

Basic Testimonial Card

"

Working with this team was a game-changer. We shipped our product 3 months ahead of schedule and the quality exceeded every expectation.

Marcus Johnson

CEO · Northwind Labs

<div class="uk-testimonial">
    <div class="uk-testimonial-quote">"</div>
    <p class="uk-testimonial-text">
        Working with this team was a game-changer...
    </p>
    <div class="uk-testimonial-author">
        <img src="..." alt="" class="uk-testimonial-avatar">
        <div>
            <div class="uk-testimonial-name">Marcus Johnson</div>
            <div class="uk-testimonial-role">CEO · Northwind Labs</div>
        </div>
    </div>
</div>

<style>
    .uk-testimonial {
        position: relative;
        padding: 2rem 1.75rem 1.75rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
    }
    .uk-testimonial-quote {
        position: absolute;
        top: 8px; left: 16px;
        font-size: 4rem;
        font-family: Georgia, serif;
        color: #eef2f8;
        line-height: 1;
    }
    .uk-testimonial-text {
        position: relative;
        font-size: 0.95rem;
        line-height: 1.65;
        color: #334155;
        margin-bottom: 1.5rem;
    }
    .uk-testimonial-author {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .uk-testimonial-avatar {
        width: 44px; height: 44px;
        border-radius: 50%;
        object-fit: cover;
    }
    .uk-testimonial-name { font-weight: 700; font-size: 0.88rem; color: #0b1b2f; }
    .uk-testimonial-role { font-size: 0.76rem; color: #94a3b8; }
</style>

Testimonial Grid

"

Slick, clean, and shipped fast. Would 100% hire again.

John Doe

Designer

"

Fantastic communication and pixel-perfect delivery.

Ali Khan

Founder

"

The best freelance experience I have had in years.

Sam Lee

PM

<div class="uk-testimonial-grid">
    <div class="uk-testimonial">...</div>
    <div class="uk-testimonial">...</div>
    <div class="uk-testimonial">...</div>
</div>

<style>
    .uk-testimonial-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
    }
</style>

Testimonial with Rating

Absolutely brilliant from start to finish. The UI kit saved us weeks of design time.

David Park

CTO · Lumen

<div class="uk-testimonial">
    <div class="uk-testimonial-stars">
        <i class="fas fa-star"></i><i class="fas fa-star"></i>
        <i class="fas fa-star"></i><i class="fas fa-star"></i>
        <i class="fas fa-star"></i>
    </div>
    <p class="uk-testimonial-text">...</p>
    <div class="uk-testimonial-author">...</div>
</div>

<style>
    .uk-testimonial-stars {
        color: #f59e0b;
        font-size: 0.85rem;
        margin-bottom: 0.75rem;
        letter-spacing: 2px;
    }
</style>

Minimal Quote

"The fastest way to ship beautiful UI without reinventing the wheel."

— Sarah Chen, Product Designer

<div class="uk-testimonial-quote-only">
    <p class="uk-testimonial-quote-text">
        "The fastest way to ship beautiful UI without reinventing the wheel."
    </p>
    <div class="uk-testimonial-quote-author">
        — Sarah Chen, Product Designer
    </div>
</div>

<style>
    .uk-testimonial-quote-only {
        padding: 2rem;
        border-left: 4px solid #1e3a8a;
        background: #f8fafc;
        border-radius: 0 0.75rem 0.75rem 0;
    }
    .uk-testimonial-quote-text {
        font-size: 1.15rem;
        font-style: italic;
        color: #1e293b;
        line-height: 1.55;
        margin-bottom: 0.75rem;
    }
    .uk-testimonial-quote-author {
        font-weight: 700;
        color: #1e3a8a;
        font-size: 0.85rem;
    }
</style>

Featured Testimonial

"I've tried a dozen UI kits and this is the first one that felt truly production-ready out of the box."

James Miller

Engineering Lead · Vertex

<div class="uk-testimonial-featured">
    <img src="..." class="uk-testimonial-feat-avatar">
    <p class="uk-testimonial-feat-text">"..."</p>
    <div class="uk-testimonial-feat-name">James Miller</div>
    <div class="uk-testimonial-feat-role">Engineering Lead · Vertex</div>
</div>

<style>
    .uk-testimonial-featured {
        text-align: center;
        padding: 2.5rem 1.75rem;
        background: linear-gradient(135deg, #eef2f8 0%, #f8fafc 100%);
        border-radius: 1.25rem;
        border: 1px solid #e2e8f0;
    }
    .uk-testimonial-feat-avatar {
        width: 72px; height: 72px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
        box-shadow: 0 4px 12px rgba(30, 58, 138, 0.15);
        margin-bottom: 1rem;
    }
    .uk-testimonial-feat-text {
        font-size: 1.1rem;
        font-style: italic;
        color: #1e293b;
        line-height: 1.6;
        margin-bottom: 1.25rem;
    }
    .uk-testimonial-feat-name {
        font-weight: 700;
        color: #0b1b2f;
        font-size: 0.95rem;
    }
    .uk-testimonial-feat-role {
        font-size: 0.8rem;
        color: #64748b;
    }
</style>

Split Testimonial

"Saved our team hundreds of hours. The components are clean, accessible, and easy to customize."

Robert Chen

VP Product · Cohere

<div class="uk-testimonial-split">
    <img src="..." class="uk-testimonial-split-img">
    <div class="uk-testimonial-split-body">
        <p class="uk-testimonial-text">"..."</p>
        <div class="uk-testimonial-name">Robert Chen</div>
        <div class="uk-testimonial-role">VP Product · Cohere</div>
    </div>
</div>

<style>
    .uk-testimonial-split {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        padding: 1.5rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
    }
    .uk-testimonial-split-img {
        width: 96px; height: 96px;
        border-radius: 0.75rem;
        object-fit: cover;
        flex-shrink: 0;
    }
    .uk-testimonial-split-body { min-width: 0; }
</style>

Testimonials