Tools / UI Kit / Bootstrap / Blog Layouts

Blog Layouts

Card grid, list, featured and sidebar blog layouts.

Blog Card Grid
Cover Design

The future of UI design in 2025

How AI is changing the way we build interfaces.

Sarah Chen
• Mar 12
Cover Engineering

Building scalable design systems

Lessons learned from managing 500+ components.

David Park
• Mar 10
Cover Product

Why we killed our most popular feature

Sometimes less really is more. Here is what we learned.

Marcus Johnson
• Mar 8 
<div class="uk-blog-grid">
    <div class="uk-blog-card">
        <div class="uk-blog-img">
            <img src="..." alt="">
            <span class="uk-blog-tag">Design</span>
        </div>
        <div class="uk-blog-content">
            <h3 class="uk-blog-title">The future of UI design</h3>
            <p class="uk-blog-desc">How AI is changing...</p>
            <div class="uk-blog-meta">
                <div class="uk-blog-author">
                    <img src="..." alt="">
                    <span>Sarah Chen</span>
                </div>
                <span class="uk-blog-dot">•</span>
                <span>Mar 12</span>
            </div>
        </div>
    </div>
</div>

<style>
    .uk-blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.5rem;
    }
    .uk-blog-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
    }
    .uk-blog-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(30, 58, 138, 0.08);
    }
    .uk-blog-img {
        position: relative;
        aspect-ratio: 16/9;
        background: #f1f5f9;
    }
    .uk-blog-img img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
    .uk-blog-tag {
        position: absolute;
        top: 1rem; left: 1rem;
        background: #fff;
        color: #1e3a8a;
        font-size: 0.68rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .uk-blog-content {
        padding: 1.25rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .uk-blog-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0b1b2f;
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }
    .uk-blog-desc {
        font-size: 0.85rem;
        color: #64748b;
        line-height: 1.6;
        margin-bottom: 1.25rem;
        flex: 1;
    }
    .uk-blog-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: #94a3b8;
        margin-top: auto;
    }
    .uk-blog-author {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    .uk-blog-author img {
        width: 24px; height: 24px;
        border-radius: 50%;
        object-fit: cover;
    }
    .uk-blog-dot { opacity: 0.5; }
</style>
Featured Hero Post
Cover
Product Design

Designing for trust: The invisible UI

How small details like loading states, error messages, and micro-interactions build (or break) user trust.

Sarah Chen • Mar 15, 2025 
<div class="uk-blog-featured">
    <div class="uk-blog-feat-img">
        <img src="..." alt="">
    </div>
    <div class="uk-blog-feat-overlay">
        <div class="uk-blog-tag">Product Design</div>
        <h2 class="uk-blog-feat-title">Designing for trust</h2>
        <p class="uk-blog-feat-desc">How small details build trust.</p>
        <div class="uk-blog-author">
            <img src="..." alt="">
            <span>Sarah Chen</span>
        </div>
    </div>
</div>

<style>
    .uk-blog-featured {
        position: relative;
        min-height: 400px;
        border-radius: 1rem;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }
    .uk-blog-feat-img {
        position: absolute;
        inset: 0;
    }
    .uk-blog-feat-img img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
    .uk-blog-feat-overlay {
        position: relative;
        padding: 2.5rem 2rem;
        background: linear-gradient(to top, rgba(11,27,47,0.95) 0%, rgba(11,27,47,0.4) 60%, transparent 100%);
        color: #fff;
        width: 100%;
        text-align: left;
    }
    .uk-blog-feat-title {
        font-size: 1.75rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 0.75rem;
        max-width: 600px;
    }
    .uk-blog-feat-desc {
        font-size: 0.95rem;
        color: rgba(255,255,255,0.8);
        margin-bottom: 1.25rem;
        max-width: 500px;
        line-height: 1.5;
    }
</style>
Horizontal List View
Engineering

How we migrated to micro-frontends

A deep dive into our architecture journey.

David Park • Mar 14
Design

The psychology of color in UI

Why your button color matters more than you think.

Ali Khan • Mar 11 
<div class="uk-blog-list-item">
    <div class="uk-blog-list-img">
        <img src="..." alt="">
    </div>
    <div class="uk-blog-list-content">
        <span class="uk-blog-tag">Engineering</span>
        <h3 class="uk-blog-title">How we migrated to micro-frontends</h3>
        <p class="uk-blog-desc">A deep dive into our architecture.</p>
        <div class="uk-blog-meta">...</div>
    </div>
</div>

<style>
    .uk-blog-list-item {
        display: flex;
        gap: 1.25rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.15s;
        padding: 1rem;
        align-items: center;
    }
    .uk-blog-list-item:hover {
        border-color: rgba(30, 58, 138, 0.4);
    }
    .uk-blog-list-img {
        width: 120px;
        height: 120px;
        border-radius: 0.75rem;
        overflow: hidden;
        flex-shrink: 0;
    }
    .uk-blog-list-img img {
        width: 100%; height: 100%;
        object-fit: cover;
    }
    .uk-blog-list-content {
        flex: 1;
        text-align: left;
    }
    @media (max-width: 480px) {
        .uk-blog-list-item { flex-direction: column; align-items: stretch; }
        .uk-blog-list-img { width: 100%; height: 180px; }
    }
</style>
Blog with Sidebar
News

WebNexa raises $5M Series A

Tutorial

Build a dashboard in 10 minutes

Categories
Subscribe
<div class="uk-blog-layout">
    <div class="uk-blog-main">
        <!-- Blog posts here -->
    </div>
    <div class="uk-blog-sidebar">
        <div class="uk-blog-widget">
            <div class="uk-blog-widget-title">Categories</div>
            <ul class="uk-blog-widget-list">
                <li><a href="#">Design (12)</a></li>
            </ul>
        </div>
    </div>
</div>

<style>
    .uk-blog-layout {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
    @media (max-width: 768px) {
        .uk-blog-layout { grid-template-columns: 1fr; }
    }
    .uk-blog-sidebar { text-align: left; }
    .uk-blog-widget {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    .uk-blog-widget-title {
        font-weight: 800;
        color: #0b1b2f;
        margin-bottom: 1rem;
        font-size: 0.9rem;
    }
    .uk-blog-widget-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .uk-blog-widget-list li {
        margin-bottom: 0.5rem;
    }
    .uk-blog-widget-list a {
        color: #64748b;
        text-decoration: none;
        font-size: 0.85rem;
        transition: color 0.15s;
    }
    .uk-blog-widget-list a:hover { color: #1e3a8a; }
    .uk-blog-widget-input {
        width: 100%;
        padding: 0.6rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        outline: 0;
    }
    .uk-blog-widget-input:focus { border-color: #1e3a8a; }
    .uk-blog-widget-btn {
        width: 100%;
        padding: 0.6rem;
        background: #1e3a8a;
        color: #fff;
        border: 0;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
    }
</style>
Minimal Text Blog
Mar 12

The Art of Simplicity

Design
Mar 10

Scaling Design Systems

Engineering
Mar 08

Reflections on 2024

Personal
<div class="uk-blog-minimal">
    <div class="uk-blog-min-date">Mar 12</div>
    <div class="uk-blog-min-content">
        <h3 class="uk-blog-min-title">The Art of Simplicity</h3>
        <span class="uk-blog-tag">Design</span>
    </div>
    <i class="fas fa-arrow-right"></i>
</div>

<style>
    .uk-blog-minimal {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid #e2e8f0;
        cursor: pointer;
        transition: all 0.15s;
    }
    .uk-blog-minimal:hover { padding-left: 0.5rem; }
    .uk-blog-min-date {
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
        width: 60px;
        flex-shrink: 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .uk-blog-min-content { flex: 1; text-align: left; }
    .uk-blog-min-title {
        font-size: 1.05rem;
        font-weight: 700;
        color: #0b1b2f;
        margin-bottom: 0.25rem;
    }
    .uk-blog-min-arrow {
        color: #cbd5e1;
        font-size: 0.85rem;
        transition: color 0.15s;
    }
    .uk-blog-minimal:hover .uk-blog-min-arrow { color: #1e3a8a; }
</style>
Author Profile Card
Ali Khan
Staff Engineer

Writing about scalable frontend architecture, design systems, and the intersection of code and craft.

24Posts
1.2kFollowers
<div class="uk-blog-author-card">
    <div class="uk-blog-author-header"></div>
    <img src="..." alt="" class="uk-blog-author-avatar">
    <div class="uk-blog-author-body">
        <div class="uk-blog-author-name">Ali Khan</div>
        <div class="uk-blog-author-role">Staff Engineer</div>
        <p class="uk-blog-author-bio">Writing about scalable frontend...</p>
        <div class="uk-blog-author-stats">
            <div><strong>24</strong><span>Posts</span></div>
            <div><strong>1.2k</strong><span>Followers</span></div>
        </div>
        <button class="uk-blog-author-btn">Follow</button>
    </div>
</div>

<style>
    .uk-blog-author-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
        text-align: center;
    }
    .uk-blog-author-header {
        height: 80px;
        background: linear-gradient(135deg, #1e3a8a, #6366f1);
    }
    .uk-blog-author-avatar {
        width: 80px; height: 80px;
        border-radius: 50%;
        border: 4px solid #fff;
        object-fit: cover;
        margin-top: -40px;
        position: relative;
    }
    .uk-blog-author-body { padding: 0.75rem 1.5rem 1.5rem; }
    .uk-blog-author-name {
        font-size: 1.1rem;
        font-weight: 800;
        color: #0b1b2f;
    }
    .uk-blog-author-role {
        font-size: 0.8rem;
        color: #64748b;
        margin-top: 2px;
    }
    .uk-blog-author-bio {
        font-size: 0.82rem;
        color: #64748b;
        line-height: 1.6;
        margin: 1rem 0;
    }
    .uk-blog-author-stats {
        display: flex;
        justify-content: center;
        gap: 2rem;
        padding: 1rem 0;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 1.25rem;
    }
    .uk-blog-author-stats div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .uk-blog-author-stats strong {
        font-size: 1.1rem;
        font-weight: 800;
        color: #0b1b2f;
    }
    .uk-blog-author-stats span {
        font-size: 0.7rem;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 2px;
    }
    .uk-blog-author-btn {
        width: 100%;
        padding: 0.65rem;
        background: #1e3a8a;
        color: #fff;
        border: 0;
        border-radius: 0.5rem;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
    }
    .uk-blog-author-btn:hover { background: #0f2a5c; }
</style>