Project Analytics

<article class="card">
	<nav aria-label="Breadcrumb">
		<ul>
			<li><a href="#">Dashboard</a></li>
			<li>/</li>
			<li aria-current="page">Analytics</li>
		</ul>
	</nav>
	
	<header>
		<!-- Avatar and Titles -->
	</header>
	
	<div>
		<!-- Metadata -->
	</div>
	
	<menu class="actions">
		<li><button class="primary">Action</button></li>
	</menu>
</article>

• Title & Icon - Prominent page identification
• Description - Brief context about the page
• Metadata - Updated time, team size, status
• Action Buttons - Primary and secondary actions
• Breadcrumbs - Navigation context
• Responsive Layout - Adapts to screen size

• Dashboard Pages - Analytics and overview pages
• Resource Details - Project, user, or item pages
• Settings Sections - Configuration pages
• Report Headers - Report title and metadata
• List Headers - List page introduction
• Content Pages - Blog posts or articles

• Use semantic <h1> for page title
• Breadcrumbs should be in <nav> or use aria-label
• Include aria-label on action buttons
• Metadata should be semantically structured
• Ensure sufficient color contrast on all text
• Support keyboard navigation for all buttons

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

• Optimized for small screens
• Touch-friendly spacing maintained (44px minimum)
• Text wraps naturally without overflow
• Content density optimized for readability

Desktop (1024px+)

• Enhanced visual features
• Hover states and transitions
• Full keyboard navigation support
• Optimal spacing and sizing

Framework Integration

Responsive behavior is automatic:

• Framework handles media queries
• No custom CSS required
• Mobile-first approach applied
• Accessibility maintained at all sizes

• Clear Title - Describe page content concisely
• Relevant Metadata - Show important context only
• Primary Action - Most important button first
• Breadcrumbs - Help users understand location
• Consistent Icon - Use relevant icons for context
• Responsive Design - Stack on mobile devices