W3.CSS Material Design
Material Design
Material Design is a design system introduced by Google in 2014.
Material Design uses visual depth, spacing, color, motion, and elevation to organize interface elements.
W3.CSS can be used to create interfaces inspired by Material Design with cards, shadows, colors, bars, and responsive layouts.
Material Design Look with W3.CSS
W3.CSS classes such as w3-card, w3-bar, w3-button,
and color classes can be combined to create a similar visual style.
This example combines bars, cards, colors, and shadows:
Today
Yesterday
Color Themes
Material-inspired interfaces often use a strong primary color together with lighter and darker variations.
Places to Visit
Cinque Terre
The Cinque Terre is five small villages on the Italian Riviera.
Monterosso
Monterosso al Mare is the northernmost of the villages.
Vernazza
Vernazza is one of the five villages of the Cinque Terre.
Europe Italy
Navigation Bars
Material-style interfaces often use stacked navigation areas such as a status bar, toolbar, and tab bar.
Status Bar
Toolbar
Tab Bar
Colorful Cards
Cards are a common way to group related content and actions.
