| Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame^] | 1 | <!-- Wide card with share menu button --> |
| 2 | <style> |
| 3 | .demo-card-wide.mdl-card { |
| 4 | width: 512px; |
| 5 | } |
| 6 | .demo-card-wide > .mdl-card__title { |
| 7 | color: #fff; |
| 8 | height: 176px; |
| 9 | background: url('../assets/demos/welcome_card.jpg') center / cover; |
| 10 | } |
| 11 | .demo-card-wide > .mdl-card__menu { |
| 12 | color: #fff; |
| 13 | } |
| 14 | </style> |
| 15 | |
| 16 | <div class="demo-card-wide mdl-card mdl-shadow--2dp"> |
| 17 | <div class="mdl-card__title"> |
| 18 | <h2 class="mdl-card__title-text">Welcome</h2> |
| 19 | </div> |
| 20 | <div class="mdl-card__supporting-text"> |
| 21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| 22 | Mauris sagittis pellentesque lacus eleifend lacinia... |
| 23 | </div> |
| 24 | <div class="mdl-card__actions mdl-card--border"> |
| 25 | <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
| 26 | Get Started |
| 27 | </a> |
| 28 | </div> |
| 29 | <div class="mdl-card__menu"> |
| 30 | <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> |
| 31 | <i class="material-icons">share</i> |
| 32 | </button> |
| 33 | </div> |
| 34 | </div> |