Komponente auf Registerkarten "Materialdesign"
Eine komplexe, monochrome, von Material Design inspirierte Registerkartenkomponente für Dashboards mit responsivem Design, Unterstützung für den Dunkelmodus und interaktiven Elementen. Verwendet rasterbasierte Layouts und subtile Schatteneffekte.
HTML-Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<!-- Tabs Header -->
<div class="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
<button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-overview">
Overview
</button>
<button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-red-500 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 focus:outline-none focus:text-red-700 focus:border-red-600 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-analytics">
Analytics
</button>
<button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-reports">
Reports
</button>
<button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-settings">
Settings
</button>
</div>
<!-- Tab Content Container -->
<div class="p-4 sm:p-6 md:p-8 space-y-8">
<!-- Analytics Tab Content (Active by default for demonstration) -->
<div id="tab-content-analytics">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Dashboard Analytics</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1: Total Sales -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Total Sales</h3>
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 12h-3m-6 0h-3m8-4zm0 16-5-5h-2.586a1 1 0 01-.707-.293L11.707 10.5M10 5L3 12h3m0 0l-3-3m5 3v5c0 1.105.895 2 2 2h4c1.105 0 2-.895 2-2v-5" />
</svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,450</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+12% from last month</p>
</div>
<!-- Card 2: New Users -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">New Users</h3>
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-5m-1.58-6.425a.86.86 0 011.66 0c0 .942-.51 1.764-1.29 2.193M11 11a4 4 0 100 8h2a4 4 0 100-8h-2zM9 11l4 4m0-4l-4 4" />
</svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">870</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+5% from last week</p>
</div>
<!-- Card 3: Traffic Source -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Traffic Source</h3>
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">Google Organic</p>
<p class="text-sm text-gray-500 dark:text-gray-400">65% of total traffic</p>
</div>
</div>
<!-- Larger Chart Card -->
<div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Performance (Monthly)</h3>
<img class="w-full h-auto rounded" src="https://picsum.photos/800/400?random=1" alt="Sales Performance Chart">
</div>
<!-- Recent Activity Table -->
<div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 p-6 pb-0">Recent Activity</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Event</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">User</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">New order #1001</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">John Doe</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Completed</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Product view: 'Widget X'</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Jane Smith</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">Viewed</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Login attempt failed</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/50.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Peter Jones</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Failed</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Overview Tab Content (Hidden by default, for demonstration) -->
<div id="tab-content-overview" class="hidden">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Company Overview</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
Welcome to your dashboard! Here you can find a quick summary of your key metrics and recent activities.
This section provides a high-level view of your business performance, allowing you to gauge overall health at a glance.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Key Highlights</h3>
<ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
<li><span class="font-medium text-gray-800 dark:text-gray-200">Revenue Last 30 Days:</span> <span class="text-green-600 dark:text-green-400">$50,000</span></li>
<li><span class="font-medium text-gray-800 dark:text-gray-200">Active Customers:</span> <span class="text-red-600 dark:text-red-400">1,200</span></li>
<li><span class="font-medium text-gray-800 dark:text-gray-200">New Signups This Month:</span> <span class="text-blue-600 dark:text-blue-400">150</span></li>
</ul>
<div class="mt-6">
<img class="w-full h-48 sm:h-56 object-cover rounded" src="https://picsum.photos/400/250?random=2" alt="Overview Image">
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Quick Actions</h3>
<ul class="space-y-3">
<li>
<button class="w-full text-left p-3 rounded-md bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800/50 shadow-sm transition duration-200 flex items-center">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
Create New Report
</button>
</li>
<li>
<button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
View All Notifications
</button>
</li>
<li>
<button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Adjust Settings
</button>
</li>
</ul>
</div>
</div>
</div>
<!-- Reports Tab Content (Hidden by default, for demonstration) -->
<div id="tab-content-reports" class="hidden">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Detailed Reports</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
Access a variety of advanced reports to gain deeper insights into your data. You can filter and export these reports.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Sales by Region</h3>
<img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=3" alt="Sales by Region Chart">
<p class="text-sm text-gray-600 dark:text-gray-400">Visualize sales performance across different geographical regions. Identify top-performing areas.</p>
<button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
<svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Download CSV
</button>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Customer Demographics</h3>
<img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=4" alt="Customer Demographics Chart">
<p class="text-sm text-gray-600 dark:text-gray-400">Understand your customer base better with detailed demographic breakdowns and engagement metrics.</p>
<button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
<svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Download PDF
</button>
</div>
</div>
</div>
<!-- Settings Tab Content (Hidden by default, for demonstration) -->
<div id="tab-content-settings" class="hidden">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Account Settings</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
Manage your account preferences, notifications, and security settings here.
</p>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 mb-6">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Profile Information</h3>
<form class="space-y-4">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<input type="text" id="full-name" name="full-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="John Doe">
</div>
<div>
<label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" id="email-address" name="email-address" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="[email protected]">
</div>
<button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
Save Changes
</button>
</form>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Notification Preferences</h3>
<fieldset class="space-y-4">
<legend class="sr-only">Notification Preferences</legend>
<div class="relative flex items-start">
<div class="flex items-center h-5 w-5">
<input id="email-notifications" name="email-notifications" type="checkbox" checked class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
</div>
<div class="ml-3 text-sm">
<label for="email-notifications" class="font-medium text-gray-700 dark:text-gray-300">Email Notifications</label>
<p class="text-gray-500 dark:text-gray-400">Receive updates and announcements via email.</p>
</div>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5 w-5">
<input id="sms-notifications" name="sms-notifications" type="checkbox" class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
</div>
<div class="ml-3 text-sm">
<label for="sms-notifications" class="font-medium text-gray-700 dark:text-gray-300">SMS Notifications</label>
<p class="text-gray-500 dark:text-gray-400">Get critical alerts on your mobile device.</p>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<!-- Simple Script for Tab Functionality (can be externalized) -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const tabButtons = document.querySelectorAll('.flex.border-b button');
const tabContents = document.querySelectorAll('[id^="tab-content-"]');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
// Deactivate all buttons and hide all content
tabButtons.forEach(btn => {
btn.classList.remove('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
});
tabContents.forEach(content => {
content.classList.add('hidden');
});
// Activate clicked button and show corresponding content
const targetId = button.id.replace('tab-btn-', 'tab-content-');
document.getElementById(targetId).classList.remove('hidden');
button.classList.add('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
button.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
});
});
// Trigger click on 'Analytics' tab by default to make it active on load
document.getElementById('tab-btn-analytics').click();
});
</script>
</div>Verwandte Komponenten
Skeuomorphe Tabs-Komponente
Eine responsive Tabs-Komponente, die mit Skeuomorphismus gestaltet ist und Tailwind CSS verwendet, um reale Designelemente nachzuahmen. Es enthält Unterstützung für dunkle Themen und Platzhalterbilder.
Glassmorphism Tabs-Komponente
Einfache Glassmorphism Tabs-Komponente für Portfolio, mit responsivem Design und Unterstützung für dunkle Themen. Verwendet ein lebendiges Farbschema.
Art Deco News Tabs Komponente
Eine komplexe, reaktionsschnelle und luxuriöse Tab-Komponente im Art-Déco-Stil, die für Nachrichten- und Journalismus-Websites entwickelt wurde, mit geometrischen Mustern, satten analogen Farben und Unterstützung des Dunkelmodus. Es bietet mehrere interaktive Elemente für die Inhaltsnavigation.