Official shadow system from Microsoft Teams design language
Subtle elevation for cards and containers
Light elevation for hover states
Medium elevation for dropdowns and menus
High elevation for modals and overlays
Very high elevation for popovers
Maximum elevation for critical UI elements
Base level for cards and containers in their resting state
Hover states and dropdown menus that appear above content
Modal dialogs, popovers, and floating panels
Highest priority elements that need maximum visual separation
// React Component with Teams Shadow
<div className="shadow-[0px_2px_4px_0px_rgba(0,0,0,0.14),0px_0px_2px_0px_rgba(0,0,0,0.12)]">
<h3>Card Title</h3>
<p>Card content with Shadow-4 elevation</p>
</div>
// CSS Class
.teams-card {
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.14),
0px 0px 2px 0px rgba(0,0,0,0.12);
}
// Dark Mode Support
.dark .teams-card {
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.20),
0px 2px 4px 0px rgba(0,0,0,0.28);
}Teams uses two shadow layers: one for depth and one for definition
Shadows adjust opacity based on light/dark mode context
Shadow intensity increases with UI element importance
Minimal shadow layers for better rendering performance
Hey team, let's sync on the project status this afternoon.
Channels are where your team communicates. They're best organized around a topic.
Scheduled maintenance will begin in 30 minutes. Please save your work and prepare for a brief service interruption.
Great work on the presentation! The client loved it.
File uploaded: Design_v2.pdf
2 minutes ago
Meeting started in General
15 minutes ago