Comparison Sections
Feature comparison, side-by-side and before/after layouts.
Us vs Them Comparison
Without WebNexa
The slow way
- Write CSS from scratch
- Inconsistent spacing
- Accessibility gaps
- Duplicated components
- Slow iteration cycles
Recommended
With WebNexa UI
The fast way
- Copy-paste components
- Consistent design tokens
- WCAG AA compliant
- Reusable everywhere
- Ship 3× faster
<div class="uk-cmp">
<div class="uk-cmp-col uk-cmp-col--them">
<div class="uk-cmp-head">
<div class="uk-cmp-head-label">Without WebNexa</div>
<div class="uk-cmp-head-sub">The slow way</div>
</div>
<ul class="uk-cmp-list">
<li><i class="fas fa-times"></i> Write CSS from scratch</li>
<li><i class="fas fa-times"></i> Inconsistent spacing</li>
</ul>
</div>
<div class="uk-cmp-col uk-cmp-col--us">
<div class="uk-cmp-badge">Recommended</div>
<div class="uk-cmp-head">
<div class="uk-cmp-head-label">With WebNexa UI</div>
</div>
<ul class="uk-cmp-list">
<li><i class="fas fa-check"></i> Copy-paste components</li>
</ul>
</div>
</div>
<style>
.uk-cmp {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media (max-width: 640px) {
.uk-cmp { grid-template-columns: 1fr; }
}
.uk-cmp-col {
padding: 1.75rem 1.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
position: relative;
}
.uk-cmp-col--us {
border: 2px solid #1e3a8a;
background: linear-gradient(180deg, #eef2f8 0%, #f8fafc 100%);
box-shadow: 0 20px 40px rgba(30, 58, 138, 0.08);
}
.uk-cmp-badge {
position: absolute;
top: -12px;
right: 1.5rem;
background: #1e3a8a;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.uk-cmp-head { margin-bottom: 1.25rem; }
.uk-cmp-head-label {
font-size: 1.1rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-cmp-head-sub {
font-size: 0.8rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-cmp-list {
list-style: none;
padding: 0;
margin: 0;
}
.uk-cmp-list li {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0;
font-size: 0.85rem;
color: #475569;
}
.uk-cmp-list li i {
width: 20px; height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.65rem;
flex-shrink: 0;
}
.uk-cmp-col--them .uk-cmp-list li i {
background: #fee2e2;
color: #dc2626;
}
.uk-cmp-col--us .uk-cmp-list li i {
background: #ecfdf5;
color: #059669;
}
</style>
Feature Comparison Table
| Feature | Starter | Pro | Business |
|---|---|---|---|
| Projects | 3 | Unlimited | Unlimited |
| Storage | 1 GB | 100 GB | 1 TB |
| Custom domain | |||
| Priority support | |||
| SSO & SAML |
<table class="uk-cmp-table">
<thead>
<tr>
<th>Feature</th>
<th>Starter</th>
<th class="highlight">Pro</th>
<th>Business</th>
</tr>
</thead>
<tbody>
<tr>
<td>Projects</td>
<td>3</td>
<td class="highlight">Unlimited</td>
<td>Unlimited</td>
</tr>
</tbody>
</table>
<style>
.uk-cmp-table-wrap {
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 1rem;
background: #fff;
}
.uk-cmp-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.uk-cmp-table th,
.uk-cmp-table td {
padding: 0.85rem 1rem;
text-align: left;
border-bottom: 1px solid #f1f5f9;
}
.uk-cmp-table thead th {
background: #f8fafc;
font-weight: 700;
color: #0b1b2f;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.uk-cmp-table .highlight {
background: #eef2f8;
color: #1e3a8a;
font-weight: 700;
}
.uk-cmp-table tbody tr:last-child td { border-bottom: 0; }
</style>
Before / After Comparison
Before
Messy, inconsistent layout
After
Clean, consistent layout
<div class="uk-cmp-ba">
<div class="uk-cmp-ba-side">
<div class="uk-cmp-ba-label">
<span class="uk-cmp-ba-dot red"></span> Before
</div>
<div class="uk-cmp-ba-visual">
<div class="uk-cmp-ba-mock">
<div class="uk-cmp-ba-mock-line" style="width:70%;"></div>
<div class="uk-cmp-ba-mock-block"></div>
</div>
</div>
<div class="uk-cmp-ba-caption">Messy layout</div>
</div>
<div class="uk-cmp-ba-arrow"><i class="fas fa-arrow-right"></i></div>
<div class="uk-cmp-ba-side">
<div class="uk-cmp-ba-label">
<span class="uk-cmp-ba-dot green"></span> After
</div>
<div class="uk-cmp-ba-visual">
<div class="uk-cmp-ba-mock">...</div>
</div>
<div class="uk-cmp-ba-caption">Clean layout</div>
</div>
</div>
<style>
.uk-cmp-ba {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
}
@media (max-width: 640px) {
.uk-cmp-ba { grid-template-columns: 1fr; }
.uk-cmp-ba-arrow { transform: rotate(90deg); margin: 0 auto; }
}
.uk-cmp-ba-side { text-align: center; }
.uk-cmp-ba-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 700;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
}
.uk-cmp-ba-dot {
width: 8px; height: 8px;
border-radius: 50%;
}
.uk-cmp-ba-dot.red { background: #dc2626; }
.uk-cmp-ba-dot.green { background: #059669; }
.uk-cmp-ba-visual {
aspect-ratio: 4/3;
border-radius: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.uk-cmp-ba-mock {
background: #fff;
border-radius: 0.5rem;
width: 100%;
padding: 0.75rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.uk-cmp-ba-mock-line {
height: 6px;
background: #94a3b8;
border-radius: 999px;
margin-bottom: 0.5rem;
}
.uk-cmp-ba-mock-block {
height: 32px;
background: #cbd5e1;
border-radius: 0.4rem;
margin: 0.5rem 0;
}
.uk-cmp-ba-arrow {
width: 40px; height: 40px;
border-radius: 50%;
background: #1e3a8a;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
}
.uk-cmp-ba-caption {
font-size: 0.82rem;
color: #64748b;
margin-top: 0.75rem;
font-weight: 600;
}
</style>
Two-Column Feature Comparison
Slow workflow
- Manual CSS tweaks
- Reinventing components
- Testing from scratch
Blazing fast
- Copy-paste components
- Pre-tested, accessible
- Theme in seconds
<div class="uk-cmp-grid">
<div class="uk-cmp-grid-col">
<div class="uk-cmp-grid-icon" style="background:#fee2e2;color:#dc2626;">
<i class="fas fa-bolt"></i>
</div>
<div class="uk-cmp-grid-title">Slow workflow</div>
<ul class="uk-cmp-grid-list">
<li>Manual CSS tweaks</li>
</ul>
</div>
<div class="uk-cmp-grid-col highlight">
<div class="uk-cmp-grid-icon" style="background:#ecfdf5;color:#059669;">
<i class="fas fa-rocket"></i>
</div>
<div class="uk-cmp-grid-title">Blazing fast</div>
<ul class="uk-cmp-grid-list">
<li>Copy-paste components</li>
</ul>
</div>
</div>
<style>
.uk-cmp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 640px) {
.uk-cmp-grid { grid-template-columns: 1fr; }
}
.uk-cmp-grid-col {
padding: 1.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
}
.uk-cmp-grid-col.highlight {
border: 2px solid #1e3a8a;
background: #eef2f8;
}
.uk-cmp-grid-icon {
width: 44px; height: 44px;
border-radius: 0.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
margin-bottom: 0.85rem;
}
.uk-cmp-grid-title {
font-size: 1rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.75rem;
}
.uk-cmp-grid-list {
list-style: none;
padding: 0;
margin: 0;
}
.uk-cmp-grid-list li {
font-size: 0.83rem;
color: #475569;
padding: 0.35rem 0;
padding-left: 1.1rem;
position: relative;
}
.uk-cmp-grid-list li::before {
content: '•';
position: absolute;
left: 0;
color: #94a3b8;
}
</style>
Compact Comparison with Legend
Custom themes
Multi-user
API access
Priority support
<div class="uk-cmp-legend">
<div class="uk-cmp-legend-row">
<div class="uk-cmp-legend-label">Custom themes</div>
<div class="uk-cmp-legend-value"><i class="fas fa-check-circle"></i></div>
<div class="uk-cmp-legend-value"><i class="fas fa-times-circle"></i></div>
</div>
</div>
<style>
.uk-cmp-legend {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
}
.uk-cmp-legend-row {
display: grid;
grid-template-columns: 1fr 100px 100px;
align-items: center;
padding: 0.85rem 1rem;
border-bottom: 1px solid #f1f5f9;
text-align: left;
}
.uk-cmp-legend-row:last-child { border-bottom: 0; }
.uk-cmp-legend-label {
font-size: 0.85rem;
color: #0b1b2f;
font-weight: 600;
}
.uk-cmp-legend-value {
text-align: center;
font-size: 1rem;
}
.uk-cmp-legend-value i.fa-check-circle { color: #059669; }
.uk-cmp-legend-value i.fa-times-circle { color: #dc2626; }
</style>