Content Sections
Mixed content sections with text, images and CTAs.
Text + Image Split
<section class="uk-section-split">
<div class="uk-section-split-text">
<div class="uk-section-eyebrow">Why WebNexa</div>
<h3 class="uk-section-title">Ship beautiful products</h3>
<p class="uk-section-desc">Every component is production-ready.</p>
<a href="#" class="uk-section-link">Read the docs →</a>
</div>
<div class="uk-section-split-visual"></div>
</section>
<style>
.uk-section-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
padding: 3rem 2.5rem;
background: #f9fafc;
}
@media (max-width: 768px) {
.uk-section-split { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
}
.uk-section-eyebrow {
font-size: 0.72rem;
font-weight: 700;
color: #1e3a8a;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.uk-section-title {
font-size: 1.75rem;
font-weight: 800;
color: #0b1b2f;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
line-height: 1.2;
}
.uk-section-desc {
font-size: 0.95rem;
color: #64748b;
line-height: 1.65;
margin-bottom: 1.25rem;
}
.uk-section-link {
color: #1e3a8a;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.uk-section-split-visual {
height: 260px;
border-radius: 1rem;
background: linear-gradient(135deg, #dbeafe, #c7d2fe);
}
</style>
Centered Section
<section class="uk-section-centered">
<div class="uk-section-pill">New in v2.0</div>
<h3 class="uk-section-title">Everything you need</h3>
<p class="uk-section-desc">A complete design system.</p>
<a href="#" class="uk-section-btn">Get Started Free</a>
</section>
<style>
.uk-section-centered {
text-align: center;
padding: 3.5rem 2rem;
background: #f9fafc;
}
.uk-section-pill {
display: inline-block;
background: #eef2f8;
color: #1e3a8a;
font-size: 0.72rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 1rem;
}
.uk-section-btn {
display: inline-block;
padding: 0.7rem 1.5rem;
background: #1e3a8a;
color: #fff;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
}
</style>
Two-Column Text
Our Mission
Democratize great design
We believe great design shouldn't be locked behind expensive agencies or months of iteration. Every developer, every founder, every team deserves tools that make beautiful products the default.
That's why we built WebNexa — a growing library of production-ready components that just work.
<div class="uk-section-twocol">
<div class="uk-section-twocol-left">
<div class="uk-section-eyebrow">Our Mission</div>
<h3 class="uk-section-title">Democratize great design</h3>
</div>
<div class="uk-section-twocol-right">
<p class="uk-section-desc">We believe great design...</p>
</div>
</div>
<style>
.uk-section-twocol {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 3rem;
padding: 2.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
}
@media (max-width: 768px) {
.uk-section-twocol { grid-template-columns: 1fr; gap: 1.5rem; }
}
</style>
Section with Inline Stats
<section class="uk-section-stats">
<h3 class="uk-section-title" style="text-align:center;">Trusted worldwide</h3>
<p class="uk-section-desc" style="text-align:center;">From indie to enterprise.</p>
<div class="uk-section-stats-grid">
<div class="uk-section-stat">
<div class="uk-section-stat-value">2.5M+</div>
<div class="uk-section-stat-label">Downloads</div>
</div>
</div>
</section>
<style>
.uk-section-stats {
padding: 3rem 2rem;
background: #fff;
}
.uk-section-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1.5rem;
max-width: 800px;
margin: 0 auto;
}
.uk-section-stat { text-align: center; }
.uk-section-stat-value {
font-size: 2.25rem;
font-weight: 800;
color: #1e3a8a;
line-height: 1;
letter-spacing: -0.03em;
}
.uk-section-stat-label {
font-size: 0.75rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-top: 0.35rem;
}
</style>
Alternating Content Rows
01 · Design
Pixel-perfect components
Every component ships with consistent spacing, colors, and typography.
02 · Code
Clean, semantic markup
Accessible HTML that works with screen readers and search engines.
<div class="uk-section-alt">
<div class="uk-section-alt-row">
<div class="uk-section-alt-text">
<div class="uk-section-eyebrow">01 · Design</div>
<div class="uk-section-alt-title">Pixel-perfect components</div>
<div class="uk-section-desc">Consistent spacing, colors, and typography.</div>
</div>
<div class="uk-section-alt-visual"></div>
</div>
<div class="uk-section-alt-row reverse">...</div>
</div>
<style>
.uk-section-alt { display: flex; flex-direction: column; gap: 2rem; }
.uk-section-alt-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.uk-section-alt-row.reverse { direction: rtl; }
.uk-section-alt-row.reverse > * { direction: ltr; }
@media (max-width: 768px) {
.uk-section-alt-row,
.uk-section-alt-row.reverse { grid-template-columns: 1fr; direction: ltr; }
}
.uk-section-alt-title {
font-size: 1.35rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-section-alt-visual {
height: 180px;
border-radius: 1rem;
}
</style>
Quote Section
<section class="uk-section-quote">
<div class="uk-section-quote-mark">"</div>
<blockquote class="uk-section-quote-text">
The best design system I've used.
</blockquote>
<div class="uk-section-quote-author">
<img src="..." alt="">
<div>
<div class="uk-section-quote-name">Alex Rivera</div>
<div class="uk-section-quote-role">Head of Product</div>
</div>
</div>
</section>
<style>
.uk-section-quote {
position: relative;
text-align: center;
padding: 3.5rem 2rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
}
.uk-section-quote-mark {
font-family: Georgia, serif;
font-size: 5rem;
color: #eef2f8;
line-height: 1;
margin-bottom: -1.5rem;
}
.uk-section-quote-text {
font-size: 1.15rem;
font-style: italic;
color: #1e293b;
line-height: 1.65;
max-width: 560px;
margin: 0 auto 1.75rem;
}
.uk-section-quote-author {
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.uk-section-quote-author img {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
}
.uk-section-quote-name {
font-weight: 700;
color: #0b1b2f;
font-size: 0.9rem;
text-align: left;
}
.uk-section-quote-role {
font-size: 0.78rem;
color: #94a3b8;
text-align: left;
}
</style>