Article Component
Article Component: The Article component provides consistent styling for long-form content with proper typography, spacing, and text formatting.
Live Examples
1. Basic Article
The Future of Web Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2. Article with Dropcap
The Art of Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.
Modern typography has its roots in the development of movable type during the Renaissance. Today, digital typography has evolved to include responsive typography, variable fonts, and advanced layout systems that adapt to different screen sizes and devices.
Good typography establishes a strong visual hierarchy, provides a graphic balance to the website, and sets the product's overall tone. Typography should guide and inform your users, optimize readability and accessibility, and ensure an excellent user experience.
3. Article with Divider
Sustainable Web Design Principles
Sustainable web design is an approach to designing web services that puts people and planet first.
Introduction
The internet's carbon footprint is growing at an alarming rate. As web professionals, we have a responsibility to create digital products and services that respect the planet.
Key Principles
1. Clean and Efficient Code
Writing clean, efficient code reduces file sizes and improves performance. This means less energy consumption on both servers and user devices.
2. Sustainable Hosting
Choose hosting providers that use renewable energy. Many companies now offer carbon-neutral or green hosting solutions.
Implementation
- Optimize images and assets
- Minify CSS and JavaScript
- Use efficient caching strategies
- Implement lazy loading
"Sustainable web design isn't just about saving the planet; it's about creating better experiences for everyone."
4. Article with Image and Caption
The Evolution of Mobile UI Design
From Skeuomorphism to Flat Design
The journey of mobile UI design has been marked by significant shifts in design philosophy. The early days of smartphones were dominated by skeuomorphic design - interfaces that mimicked real-world objects with detailed textures, shadows, and reflections.
2007-2013: Skeuomorphism
- Realistic textures and shadows
- Metaphorical design elements
- Heavy visual cues
2013-Present: Flat Design
- Minimalist approach
- Clean typography
- Bold colors and simplicity
The shift to flat design wasn't just aesthetic - it improved performance and readability on mobile devices.
Article Components Reference
Article Classes
| Class | Description | Example |
|---|---|---|
.uk-article | Main article container | <article class="uk-article"> |
.uk-article-title | Article title styling | <h1 class="uk-article-title"> |
.uk-article-meta | Metadata styling (author, date) | <p class="uk-article-meta"> |
.uk-text-lead | Lead paragraph styling | <p class="uk-text-lead"> |
.uk-dropcap | Drop cap for first paragraph | <p class="uk-dropcap"> |
Typography Classes
| Class | Description | Example |
|---|---|---|
.uk-text-lead | Large, emphasized text | Lead text example |
.uk-text-meta | Small, muted text for metadata | |
.uk-text-small | Smaller text size | Small text example |
.uk-text-large | Larger text size | Large text example |
.uk-text-bold | Bold text | Bold text example |
.uk-text-italic | Italic text | Italic text example |
Divider Classes
| Class | Description | Example |
|---|---|---|
.uk-divider-icon | Divider with icon in center | |
.uk-divider-small | Small width divider | |
.uk-divider-vertical | Vertical divider |
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Article Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.article-header {
margin-bottom: 40px;
}
.article-content {
margin-bottom: 40px;
}
.article-footer {
border-top: 1px solid #e5e5e5;
padding-top: 20px;
}
</style>
</head>
<body>
<!-- Article Header -->
<header class="article-header">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="#">TechBlog</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
</header>
<!-- Main Article -->
<main class="article-content">
<article class="uk-article">
<h1 class="uk-article-title">The Rise of AI in Web Development</h1>
<div class="uk-article-meta">
<div class="uk-flex uk-flex-middle">
<img class="uk-border-circle" src="author.jpg" width="40" height="40" alt="Author">
<div class="uk-margin-left">
<span>By <a href="#">Sarah Johnson</a></span><br>
<span class="uk-text-meta">Published on April 15, 2024 • 8 min read</span>
</div>
</div>
<div class="uk-margin-top">
<span class="uk-label">Artificial Intelligence</span>
<span class="uk-label">Web Development</span>
<span class="uk-label">Future Tech</span>
</div>
</div>
<figure class="uk-margin-medium">
<img src="ai-webdev.jpg" alt="AI in Web Development" class="uk-border-rounded" style="width: 100%; height: 300px; object-fit: cover;">
<figcaption class="uk-text-meta uk-text-center uk-margin-small-top">
AI-powered tools are revolutionizing how we build websites
</figcaption>
</figure>
<p class="uk-text-lead">
Artificial Intelligence is no longer just a buzzword in the tech industry. It's actively transforming how web developers work, from code generation to design assistance.
</p>
<p class="uk-dropcap">
Over the past few years, AI has made significant strides in web development. What started as simple code completion suggestions has evolved into sophisticated tools that can generate entire websites, optimize performance, and even write complex backend logic.
</p>
<h2>Current AI Tools for Developers</h2>
<div class="uk-grid-small uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">GitHub Copilot</h3>
<p>AI-powered code completion that suggests whole lines or blocks of code as you type.</p>
<ul class="uk-list uk-list-disc">
<li>Supports multiple languages</li>
<li>Context-aware suggestions</li>
<li>Integration with popular editors</li>
</ul>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">ChatGPT for Code</h3>
<p>Generates code snippets, explains complex concepts, and helps debug issues.</p>
<ul class="uk-list uk-list-disc">
<li>Natural language interface</li>
<li>Multiple programming languages</li>
<li>Step-by-step explanations</li>
</ul>
</div>
</div>
</div>
<hr class="uk-divider-icon">
<h2>Benefits of AI in Web Development</h2>
<div class="uk-alert-primary" uk-alert>
<p><strong>Increased Productivity:</strong> Developers can write code faster with AI assistance, reducing development time significantly.</p>
</div>
<div class="uk-alert-success" uk-alert>
<p><strong>Reduced Errors:</strong> AI tools can catch common mistakes and suggest improvements, leading to cleaner, more reliable code.</p>
</div>
<div class="uk-alert-warning" uk-alert>
<p><strong>Learning Opportunity:</strong> Junior developers can learn from AI suggestions and improve their coding skills.</p>
</div>
<h2>Code Example</h2>
<pre><code class="language-javascript">
// AI-generated code example
function optimizeImage(imageUrl) {
return new Promise((resolve, reject) => {
// AI suggested optimization logic
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
// ... optimization code
resolve(canvas.toDataURL('image/jpeg', 0.7));
};
img.src = imageUrl;
});
}
</code></pre>
<blockquote class="uk-blockquote">
<p>"AI won't replace developers, but developers who use AI will replace those who don't."</p>
<footer>Anonymous Tech Leader</footer>
</blockquote>
<h2>Future Predictions</h2>
<p>Looking ahead, we can expect AI to become even more integrated into the web development workflow. Some predictions include:</p>
<ol class="uk-list uk-list-decimal">
<li>Fully AI-generated websites from natural language descriptions</li>
<li>Real-time accessibility and performance optimization</li>
<li>Automated testing and bug fixing</li>
<li>Personalized user experiences generated dynamically</li>
</ol>
<div class="uk-grid-small uk-child-width-auto" uk-grid>
<div>
<a class="uk-button uk-button-primary" href="#">
<span uk-icon="icon: heart"></span> Like
</a>
</div>
<div>
<a class="uk-button uk-button-default" href="#">
<span uk-icon="icon: comment"></span> 24 Comments
</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">
<span uk-icon="icon: share"></span> Share
</a>
</div>
</div>
</article>
</main>
<!-- Article Footer -->
<footer class="article-footer">
<div class="uk-grid-small uk-child-width-1-2@m" uk-grid>
<div>
<h3>About the Author</h3>
<p>Sarah Johnson is a senior web developer with 10+ years of experience in frontend technologies and AI integration.</p>
</div>
<div>
<h3>Related Articles</h3>
<ul class="uk-list">
<li><a href="#">The Future of CSS</a></li>
<li><a href="#">JavaScript Frameworks Comparison</a></li>
<li><a href="#">Web Performance Optimization</a></li>
</ul>
</div>
</div>
</footer>
<!-- UIKit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
</body>
</html>Article Components
Lists in Articles
Unordered List:
- First list item
- Second list item
- Third list item
- Nested item 1
- Nested item 2
Ordered List:
- First step
- Second step
- Third step
- Sub-step A
- Sub-step B
<!-- Unordered List -->
<ul class="uk-list uk-list-disc">
<li>First list item</li>
<li>Second list item</li>
<li>Third list item
<ul class="uk-list uk-list-circle">
<li>Nested item 1</li>
<li>Nested item 2</li>
</ul>
</li>
</ul>
<!-- Ordered List -->
<ol class="uk-list uk-list-decimal">
<li>First step</li>
<li>Second step</li>
<li>Third step
<ol class="uk-list uk-list-lower-alpha">
<li>Sub-step A</li>
<li>Sub-step B</li>
</ol>
</li>
</ol>Blockquotes
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
<blockquote class="uk-blockquote">
<p>The Web as I envisaged it, we have not seen it yet...</p>
<footer>Tim Berners-Lee</footer>
</blockquote>Code Blocks
<!-- HTML Code Example -->
<div class="uk-container">
<h1>Hello World</h1>
<p>Welcome to my website.</p>
</div><!-- Code Block -->
<pre><code class="language-html">
<div class="uk-container">
<h1>Hello World</h1>
<p>Welcome to my website.</p>
</div>
</code></pre>Best Practices for Articles
Content Formatting Guidelines:
- Use proper heading hierarchy (h1, h2, h3, etc.)
- Keep paragraphs short (3-4 lines maximum)
- Use lists to break up complex information
- Include relevant images with proper alt text
- Use blockquotes for important quotes or citations
- Add code blocks with syntax highlighting for technical content
- Include metadata (author, date, reading time)
- Use dividers to separate major sections
- Add call-to-action buttons at the end
- Ensure proper spacing and margins for readability
Responsive Article Design
/* Responsive Article Styles */
.uk-article {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* Responsive typography */
.uk-article-title {
font-size: 2.5rem;
}
@media (max-width: 960px) {
.uk-article-title {
font-size: 2rem;
}
}
@media (max-width: 640px) {
.uk-article-title {
font-size: 1.75rem;
}
.uk-article {
padding: 15px;
}
}
/* Responsive images */
.uk-article img {
max-width: 100%;
height: auto;
}
/* Responsive grid layouts */
.uk-article .uk-grid > * {
width: 100%;
}
@media (min-width: 640px) {
.uk-article .uk-grid-small.uk-child-width-1-2@s > * {
width: calc(50% - 20px);
}
}