Bootstrap UI Kit

Icon Feature Grid

Fast

Lightning-fast performance out of the box.

Secure

Enterprise-grade security by default.

Responsive

Looks great on every screen size.

Clean Code

Semantic, accessible HTML & CSS.

Customizable

Theme colors and sizes in seconds.

Production Ready

Battle-tested in real products.

<div class="uk-feature-grid">
    <div class="uk-feature-item">
        <div class="uk-feature-icon"><i class="fas fa-bolt"></i></div>
        <div class="uk-feature-title">Fast</div>
        <div class="uk-feature-desc">Lightning-fast performance.</div>
    </div>
</div>

<style>
    .uk-feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
    }
    .uk-feature-item { text-align: center; }
    .uk-feature-icon {
        width: 56px; height: 56px;
        border-radius: 1rem;
        background: #eef2f8;
        color: #1e3a8a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        margin-bottom: 0.85rem;
    }
    .uk-feature-title {
        font-weight: 700;
        color: #0b1b2f;
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }
    .uk-feature-desc {
        font-size: 0.85rem;
        color: #64748b;
        line-height: 1.6;
    }
</style>

Left-Icon Feature List

Automated deployments

Push to main and we handle the rest.

Real-time analytics

Track every event without extra code.

Team collaboration

Invite unlimited teammates on Pro.

Custom domains

Bring your own domain, SSL included.

<div class="uk-feature-list">
    <div class="uk-feature-list-item">
        <div class="uk-feature-list-icon"><i class="fas fa-check-circle"></i></div>
        <div>
            <div class="uk-feature-title">Automated deployments</div>
            <div class="uk-feature-desc">Push to main and we handle the rest.</div>
        </div>
    </div>
</div>

<style>
    .uk-feature-list { display: flex; flex-direction: column; gap: 1.25rem; }
    .uk-feature-list-item {
        display: flex;
        gap: 0.85rem;
        align-items: flex-start;
    }
    .uk-feature-list-icon {
        width: 40px; height: 40px;
        border-radius: 0.65rem;
        background: #ecfdf5;
        color: #059669;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 0.9rem;
    }
</style>

Alternating Feature Rows

01 · Performance

Built for speed

Sub-second page loads. No bloated dependencies. Just what you need and nothing more.

02 · Security

Locked down by default

SOC 2 compliant, encrypted at rest and in transit. Your data is safe with us.

<div class="uk-feature-alt">
    <div class="uk-feature-alt-row">
        <div class="uk-feature-alt-text">
            <div class="uk-feature-alt-eyebrow">01 · Performance</div>
            <div class="uk-feature-alt-title">Built for speed</div>
            <div class="uk-feature-alt-desc">Sub-second page loads.</div>
        </div>
        <div class="uk-feature-alt-visual"></div>
    </div>
    <div class="uk-feature-alt-row reverse">...</div>
</div>

<style>
    .uk-feature-alt { display: flex; flex-direction: column; gap: 2rem; }
    .uk-feature-alt-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }
    .uk-feature-alt-row.reverse { direction: rtl; }
    .uk-feature-alt-row.reverse > * { direction: ltr; }
    @media (max-width: 768px) {
        .uk-feature-alt-row,
        .uk-feature-alt-row.reverse { grid-template-columns: 1fr; direction: ltr; }
    }
    .uk-feature-alt-eyebrow {
        font-size: 0.72rem;
        font-weight: 700;
        color: #1e3a8a;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.5rem;
    }
    .uk-feature-alt-title {
        font-size: 1.35rem;
        font-weight: 800;
        color: #0b1b2f;
        margin-bottom: 0.5rem;
    }
    .uk-feature-alt-desc {
        font-size: 0.88rem;
        color: #64748b;
        line-height: 1.65;
    }
    .uk-feature-alt-visual {
        height: 200px;
        border-radius: 1rem;
    }
</style>

Bento Feature Grid

Launch in minutes

From `git init` to production in under 5 minutes.

Global CDN

SOC 2

Real-time analytics

Track everything without writing extra code.

<div class="uk-bento">
    <div class="uk-bento-card uk-bento-large">...</div>
    <div class="uk-bento-card">...</div>
    <div class="uk-bento-card">...</div>
    <div class="uk-bento-card uk-bento-wide">...</div>
</div>

<style>
    .uk-bento {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .uk-bento-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.25rem;
        transition: all 0.2s;
    }
    .uk-bento-card:hover {
        border-color: rgba(30, 58, 138, 0.4);
        transform: translateY(-2px);
    }
    .uk-bento-large { grid-column: span 2; grid-row: span 2; }
    .uk-bento-wide  { grid-column: span 2; }
    @media (max-width: 768px) {
        .uk-bento { grid-template-columns: 1fr 1fr; }
        .uk-bento-large { grid-column: span 2; grid-row: auto; }
    }
</style>

Highlighted Feature

New feature

AI-powered suggestions

Get smart recommendations as you build. Learns your patterns and speeds up common tasks by 40%.

Learn more

<div class="uk-feature-highlight">
    <div class="uk-feature-highlight-icon">
        <i class="fas fa-wand-magic-sparkles"></i>
    </div>
    <div class="uk-feature-highlight-text">
        <div class="uk-feature-highlight-badge">New feature</div>
        <div class="uk-feature-highlight-title">AI-powered suggestions</div>
        <div class="uk-feature-highlight-desc">Get smart recommendations.</div>
        <a href="#" class="uk-feature-highlight-link">Learn more →</a>
    </div>
</div>

<style>
    .uk-feature-highlight {
        display: flex;
        gap: 1.5rem;
        padding: 2rem;
        background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 100%);
        border-radius: 1.25rem;
        align-items: flex-start;
        color: #fff;
    }
    .uk-feature-highlight-icon {
        width: 64px; height: 64px;
        border-radius: 1rem;
        background: rgba(255,255,255,0.15);
        display: flex; align-items: center; justify-content: center;
        font-size: 1.5rem;
        flex-shrink: 0;
    }
    .uk-feature-highlight-badge {
        display: inline-block;
        background: rgba(255,255,255,0.2);
        font-size: 0.7rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 999px;
        margin-bottom: 0.5rem;
    }
    .uk-feature-highlight-title {
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
    }
    .uk-feature-highlight-desc {
        font-size: 0.9rem;
        opacity: 0.85;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    .uk-feature-highlight-link {
        color: #fff;
        font-weight: 700;
        font-size: 0.85rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
</style>

Feature Comparison List

Without WebNexa

Write CSS from scratch
Inconsistent spacing
Accessibility gaps
Slow iteration

With WebNexa UI
 Copy-paste components
 Consistent design tokens
 WCAG AA compliant
 Ship 3× faster

<div class="uk-feature-compare">
    <div class="uk-feature-compare-col">
        <div class="uk-feature-compare-head">Without WebNexa</div>
        <ul>
            <li><i class="fas fa-times"></i> Write CSS from scratch</li>
        </ul>
    </div>
    <div class="uk-feature-compare-col highlight">
        <div class="uk-feature-compare-head">With WebNexa UI</div>
        <ul>
            <li><i class="fas fa-check"></i> Copy-paste components</li>
        </ul>
    </div>
</div>

<style>
    .uk-feature-compare {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    .uk-feature-compare-col {
        padding: 1.5rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
    }
    .uk-feature-compare-col.highlight {
        border: 2px solid #1e3a8a;
        background: #eef2f8;
    }
    .uk-feature-compare-head {
        font-weight: 700;
        color: #0b1b2f;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }
    .uk-feature-compare-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .uk-feature-compare-col li {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        font-size: 0.85rem;
        color: #475569;
        padding: 0.4rem 0;
    }
    .uk-feature-compare-col li i {
        width: 18px;
        text-align: center;
    }
    .uk-feature-compare-col:not(.highlight) li i { color: #dc2626; }
    .uk-feature-compare-col.highlight li i { color: #059669; }
</style>

Feature Grids