@n8d/htwoo-patterns

--- title: Teams Dashboard Card order: 20 --- # Teams Dashboard Card A specialized card component designed for Microsoft Teams dashboard layouts. The Teams Dashboard Card provides a clean, structured container for displaying dashboard content with consistent spacing, elevation, and Teams-inspired visual design. ## Overview The Teams Dashboard Card is a molecular component that creates visually cohesive content containers for Teams-style dashboards. It combines modern card design principles with Microsoft Teams aesthetics to create engaging, accessible content areas that work seamlessly within grid-based dashboard layouts. ## Features ### Design Characteristics - **Teams Aesthetics**: Matches Microsoft Teams visual design language - **Elevated Surface**: Subtle elevation (level 4) for depth and hierarchy - **Clean Borders**: Rounded corners (4px radius) for modern appearance - **Consistent Spacing**: Standardized 1rem padding for content areas - **Flexible Content**: Adapts to various content types and structures ### Layout Properties - **Box Sizing**: Border-box for predictable sizing behavior - **Background**: Clean white background (neutral-000) for content focus - **Grid Integration**: Designed for CSS Grid dashboard layouts - **Responsive Design**: Adapts gracefully to different container sizes ### Content Structure - **Header Section**: Optional card header with title and actions - **Content Area**: Main content container with proper spacing - **Footer Section**: Optional footer for actions or metadata ## Structure The Teams Dashboard Card consists of three main areas: 1. **Card Header**: `.hoo-teamsdbcard-header` - Title and header content 2. **Card Content**: `.hoo-teamsdbcard-content` - Main content area 3. **Card Container**: `.hoo-teamsdbcard` - Overall card structure ## CSS Classes ### Core Classes - `.hoo-teamsdbcard`: Main card container with styling and elevation - `.hoo-teamsdbcard-header`: Header section for title and actions - `.hoo-teamsdbcard-title`: Card title with bold typography - `.hoo-teamsdbcard-content`: Main content area with consistent padding - `.hoo-teamsdbcard-footer`: Optional footer section for actions ## Styling ### Visual Design - **Background**: White (`#ffffff`) for clean content presentation - **Border Radius**: 4px for modern, rounded appearance - **Elevation**: Level 4 shadow for subtle depth - **Padding**: 1rem (16px) for comfortable content spacing ### Typography - **Title Font Size**: 1rem (16px) for clear hierarchy - **Title Font Weight**: Bold for emphasis and structure - **Content Typography**: Inherits base typography styles ### Layout Behavior - **Box Sizing**: Border-box for predictable dimensions - **Grid Integration**: Works seamlessly with CSS Grid layouts - **Flexible Height**: Adapts to content length automatically - **Grid Spanning**: Supports custom grid column spanning ## Dashboard Grid Integration ### Standard Grid Layout ```html <div class="hoo-teamsdb"> <article class="hoo-teamsdbcard"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Quick Actions</div> </header> <div class="hoo-teamsdbcard-content"> {{> molecules-quick-links-compact }} </div> </article> <article class="hoo-teamsdbcard" style="grid-column: auto / span 2;"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Recent Activity</div> </header> <div class="hoo-teamsdbcard-content"> {{> molecules-activity-feed }} </div> </article> </div> ``` ### Responsive Grid Patterns ## Content Patterns ### Metric Cards ```html <article class="hoo-teamsdbcard"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Active Users</div> </header> <div class="hoo-teamsdbcard-content"> <div class="metric-display"> <span class="metric-number">1,247</span> <span class="metric-change positive">+12%</span> </div> <div class="metric-subtitle">This month</div> </div> </article> ``` ### List Cards ```html <article class="hoo-teamsdbcard"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Recent Files</div> <a href="/all-files" class="hoo-link-subtle">View all</a> </header> <div class="hoo-teamsdbcard-content"> <ul class="file-list"> <li class="file-item"> <span class="file-name">Project Proposal.docx</span> <span class="file-date">2 hours ago</span> </li> <li class="file-item"> <span class="file-name">Budget Review.xlsx</span> <span class="file-date">Yesterday</span> </li> </ul> </div> </article> ``` ### Chart Cards ```html <article class="hoo-teamsdbcard" style="grid-column: auto / span 3;"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Team Performance Trends</div> <div class="chart-controls"> <select class="hoo-select-compact"> <option>Last 30 days</option> <option>Last 90 days</option> </select> </div> </header> <div class="hoo-teamsdbcard-content"> <div class="chart-container"> <canvas id="performance-chart"></canvas> </div> </div> </article> ``` ## Use Cases ### Team Dashboards - **Performance Metrics**: Key performance indicators and team statistics - **Activity Feeds**: Recent team activities and updates - **Quick Actions**: Frequently used team tools and shortcuts - **Announcements**: Important team messages and updates ### Project Management - **Project Status**: Current project health and progress indicators - **Task Lists**: Priority tasks and upcoming deadlines - **Resource Allocation**: Team workload and capacity information - **Timeline Views**: Project milestones and delivery schedules ### Analytics Dashboards - **Usage Statistics**: Application and content usage metrics - **User Engagement**: Participation and interaction data - **Performance Data**: System and application performance metrics - **Trend Analysis**: Historical data and predictive insights ### Content Management - **Recent Content**: Recently created or modified documents - **Popular Resources**: Most accessed files and information - **Shared Content**: Team collaboration and sharing activities - **Content Health**: Document status and compliance information ## Accessibility ### Semantic Structure - **Article Element**: Semantic article container for screen readers - **Header Element**: Proper header structure for card titles - **Heading Hierarchy**: Appropriate heading levels for content structure - **Landmark Roles**: Clear content areas for navigation ### Keyboard Navigation - **Tab Order**: Logical tab sequence through interactive elements - **Focus Management**: Clear focus indicators for all interactive content - **Action Accessibility**: Keyboard access to all card actions - **Content Navigation**: Screen reader-friendly content structure ### Visual Accessibility - **High Contrast**: Support for high contrast modes and themes - **Color Independence**: No color-only information conveyance - **Text Scaling**: Support for browser zoom up to 200% - **Focus Indicators**: Clear visual focus states for interactive elements ## Performance Considerations ### Rendering Efficiency - **CSS Grid Integration**: Efficient layout with modern CSS Grid - **Content Lazy Loading**: Progressive loading for dashboard content - **Image Optimization**: Optimized images and graphics for web delivery - **Animation Performance**: Smooth transitions with CSS transforms ### Memory Management - **Event Delegation**: Efficient event handling for dynamic content - **Content Cleanup**: Proper cleanup of dynamic dashboard content - **Reference Management**: Avoid memory leaks with card interactions ## Browser Support ### Modern Browsers - **Chrome 87+**: Full CSS Grid and elevation support - **Firefox 110+**: Complete feature compatibility - **Safari 16+**: Full support including advanced CSS features - **Edge 87+**: Complete modern feature support ### Teams Client Support - **Teams Desktop**: Full integration with Teams desktop application - **Teams Web**: Complete web client compatibility - **Teams Mobile**: Mobile-optimized card layouts ### Dashboard Components - [Teams Dashboard Template](../../templates/teams/) - Complete dashboard layout - [Teams Toolbar](../menus/teams-toolbar.html) - Dashboard toolbar integration ### Card Components - [Teams Splash Card](../../organism/cards/teams-splash-card.html) - Promotional splash cards - [Card Elements](./card-splash-header.html) - Reusable card elements ### Grid Components - [Quick Links Grid](../../organism/quick-links-grid/) - Alternative grid layouts - [Cards Layout](../../organism/cards/) - General card layout systems ## SCSS Import ## Configuration Examples ### Metric Dashboard ```html <div class="hoo-teamsdb"> <article class="hoo-teamsdbcard"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Active Projects</div> </header> <div class="hoo-teamsdbcard-content"> <div class="metric-large">24</div> </div> </article> <article class="hoo-teamsdbcard"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Completed Tasks</div> </header> <div class="hoo-teamsdbcard-content"> <div class="metric-large">187</div> </div> </article> </div> ``` ### Content Dashboard ```html <div class="hoo-teamsdb"> <article class="hoo-teamsdbcard" style="grid-column: auto / span 4;"> <header class="hoo-teamsdbcard-header"> <div class="hoo-teamsdbcard-title">Team Activity Stream</div> </header> <div class="hoo-teamsdbcard-content"> {{> molecules-activity-timeline }} </div> </article> </div> ```