Material Design 3 Demo
ตัวอย่างการใช้งาน Material Design 3 พร้อม Light และ Dark Mode
Color System
Material Design 3 Buttons
Filled Button
Tonal Button
Elevated Button
Outlined Button
Text Button
Elevation System
.elevation-0 .elevation-1 .elevation-2 .elevation-3 .elevation-4 .elevation-5Surface Containers
Surface Container Lowest
Used for the lowest level of containers
Surface Container Low
Used for low-level containers
Surface Container
Default container surface
Surface Container High
Used for high-level containers
Surface Container Highest
Used for the highest level of containers
Interactive Cards
Card with Hover Effect
Hover over this card to see the elevation change
This card uses Material Design 3 elevation and motion principles.
Material Design 3
Modern design system by Google
Features dynamic color, improved accessibility, and new components.
Light & Dark Mode
Automatic theme switching
Toggle between light and dark themes using the button in the header.
Typography Scale
Display Large
Display Large 57px
Headline Large
Headline Large 32px
Title Large
Title Large 22px
Body Large
Body Large 16px - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Label Medium
Label Medium 12px