near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Shadow
mdui provides 24 different depth shadows to meet the needs of any scenario in Material Design.
Related Reading
Add shadow
Simply add the class .mdui-shadow-[1-24] to an element to give it a shadow of the corresponding depth. Adding the class .mdui-shadow-0 will remove the shadow.
Please drag the slider below to observe shadow changes at different depths.
Deepen shadow on hover
Add the .mdui-hoverable class to any element to deepen its shadow when the mouse hovers over it.
Example
<div class="mdui-card mdui-hoverable">
<div class="mdui-card-media">
<img src="card.jpg"/>
</div>
<div class="mdui-card-actions">
<button class="mdui-btn mdui-ripple">action 1</button>
<button class="mdui-btn mdui-ripple">action 2</button>
</div>
</div>