Blog Cards
Overlay, horizontal, and minimal blog cards.
Standard Vertical Card
Engineering
Building scalable architecture for modern web apps
Learn the core principles of designing systems that grow with your user base without breaking.
David Park
<div class="uk-blog-card">
<div class="uk-blog-card-img">
<img src="..." alt="Coding">
<span class="uk-blog-card-tag">Engineering</span>
</div>
<div class="uk-blog-card-body">
<div class="uk-blog-card-meta">Mar 15, 2025 · 5 min read</div>
<h3 class="uk-blog-card-title">Building scalable architecture...</h3>
<p class="uk-blog-card-desc">Learn the core principles...</p>
<div class="uk-blog-card-author">
<img src="..." alt="Author">
<span>David Park</span>
</div>
</div>
</div>
<style>
.uk-blog-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
transition: all 0.2s;
}
.uk-blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(30,58,138,0.08);
}
.uk-blog-card-img {
position: relative;
aspect-ratio: 16/9;
}
.uk-blog-card-img img {
width: 100%; height: 100%; object-fit: cover;
}
.uk-blog-card-tag {
position: absolute;
top: 1rem; left: 1rem;
background: #fff; color: #1e3a8a;
font-size: 0.65rem; 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-card-body { padding: 1.25rem; text-align: left; }
.uk-blog-card-meta {
font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.5rem;
}
.uk-blog-card-title {
font-size: 1.1rem; font-weight: 800; color: #0b1b2f;
line-height: 1.4; margin-bottom: 0.5rem;
}
.uk-blog-card-desc {
font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 1.25rem;
}
.uk-blog-card-author {
display: flex; align-items: center; gap: 0.5rem;
font-size: 0.8rem; font-weight: 600; color: #475569;
}
.uk-blog-card-author img {
width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
</style>
Horizontal Blog Card
Productivity
How to master remote work in 2025
Discover the tools and habits that top performers use to stay focused outside the office.
<div class="uk-blog-horiz">
<div class="uk-blog-horiz-img">
<img src="..." alt="Desk">
</div>
<div class="uk-blog-horiz-body">
<span class="uk-blog-card-tag">Productivity</span>
<h3 class="uk-blog-card-title">How to master remote work...</h3>
<p class="uk-blog-card-desc">Discover the tools...</p>
<div class="uk-blog-card-meta">5 min read</div>
</div>
</div>
<style>
.uk-blog-horiz {
display: flex;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
transition: all 0.2s;
}
.uk-blog-horiz:hover {
border-color: #cbd5e1;
box-shadow: 0 8px 24px rgba(30,58,138,0.06);
}
.uk-blog-horiz-img {
width: 240px;
flex-shrink: 0;
}
.uk-blog-horiz-img img {
width: 100%; height: 100%; object-fit: cover;
}
.uk-blog-horiz-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
@media (max-width: 640px) {
.uk-blog-horiz { flex-direction: column; }
.uk-blog-horiz-img { width: 100%; height: 200px; }
}
</style>
Image Overlay Card
<div class="uk-blog-overlay">
<img src="..." alt="Space">
<div class="uk-blog-overlay-content">
<div class="uk-blog-overlay-meta">Technology · 8 min read</div>
<h3 class="uk-blog-overlay-title">The future of AI...</h3>
<div class="uk-blog-overlay-footer">
<span>Read Article</span>
<i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<style>
.uk-blog-overlay {
position: relative;
border-radius: 1rem;
overflow: hidden;
aspect-ratio: 4/5;
cursor: pointer;
}
.uk-blog-overlay img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.4s;
}
.uk-blog-overlay:hover img { transform: scale(1.05); }
.uk-blog-overlay-content {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(11,27,47,0.95) 0%, rgba(11,27,47,0.4) 50%, transparent 100%);
padding: 2rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
}
.uk-blog-overlay-meta {
font-size: 0.7rem; font-weight: 700; color: #94a3b8;
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.uk-blog-overlay-title {
font-size: 1.25rem; font-weight: 800; line-height: 1.3; margin-bottom: 1rem;
}
.uk-blog-overlay-footer {
display: flex; align-items: center; justify-content: space-between;
font-size: 0.8rem; font-weight: 600; color: #cbd5e1;
border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1rem;
transition: color 0.15s;
}
.uk-blog-overlay:hover .uk-blog-overlay-footer { color: #fff; }
</style>
Minimal Text Card
Design
Why whitespace is the most important element in UI design
It's not what you put on the screen, it's what you leave out that makes the biggest impact.
Marcus J.
<div style="background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:2rem;text-align:left;">
<div style="font-size:0.75rem;font-weight:700;color:#1e3a8a;margin-bottom:1rem;">Design</div>
<h3 class="uk-blog-card-title">Why whitespace is...</h3>
<p class="uk-blog-card-desc">It's not what you put on the screen...</p>
<div class="d-flex justify-content-between">
<div class="uk-blog-card-author">...</div>
<span class="uk-blog-card-meta">Mar 12</span>
</div>
</div>
Split Image Card
The ultimate guide to scalable CSS
Stop fighting with your stylesheets. Learn how to structure CSS that scales with your team.
<div class="uk-blog-split">
<div class="uk-blog-split-content">
<div class="uk-blog-card-meta">March 10, 2025</div>
<h3 class="uk-blog-card-title">The ultimate guide...</h3>
<p class="uk-blog-card-desc">Stop fighting with...</p>
</div>
<div class="uk-blog-split-img">
<img src="..." alt="Matrix">
</div>
</div>
<style>
.uk-blog-split {
display: grid;
grid-template-columns: 1fr 1fr;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: left;
}
.uk-blog-split-content {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.uk-blog-split-img img {
width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 640px) {
.uk-blog-split { grid-template-columns: 1fr; }
}
</style>