| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>card test</title> |
| |
| <!-- Fonts --> |
| <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'> |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" |
| rel="stylesheet"> |
| |
| <!-- Page styles --> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css"> |
| <link rel="stylesheet" href="../../material.min.css"> |
| <link rel="stylesheet" href="../../components/demos.css"> |
| <script src="../../material.min.js"></script> |
| |
| |
| <style> |
| |
| </style> |
| |
| </head> |
| <body> |
| |
| <div style="padding-top: 24px;"> |
| |
| |
| <!-- Event card --> |
| <style> |
| .demo-card-event.mdl-card { |
| width: 256px; |
| height: 256px; |
| background: #3E4EB8; |
| } |
| .demo-card-event > .mdl-card__actions { |
| border-color: rgba(255, 255, 255, 0.2); |
| } |
| .demo-card-event > .mdl-card__title { |
| align-items: flex-start; |
| } |
| .demo-card-event > .mdl-card__title > h4 { |
| margin-top: 0; |
| } |
| .demo-card-event > .mdl-card__actions { |
| display: flex; |
| box-sizing:border-box; |
| align-items: center; |
| } |
| .demo-card-event > .mdl-card__actions > .material-icons { |
| padding-right: 10px; |
| } |
| .demo-card-event > .mdl-card__title, |
| .demo-card-event > .mdl-card__actions, |
| .demo-card-event > .mdl-card__actions > .mdl-button { |
| color: #fff; |
| } |
| </style> |
| |
| <div class="demo-card-event mdl-card mdl-shadow--2dp"> |
| <div class="mdl-card__title mdl-card--expand"> |
| <h4> |
| Featured event:<br> |
| May 24, 2016<br> |
| 7-11pm |
| </h4> |
| </div> |
| <div class="mdl-card__actions mdl-card--border"> |
| <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
| Add to Calendar |
| </a> |
| <div class="mdl-layout-spacer"></div> |
| <i class="material-icons">event</i> |
| </div> |
| </div> |
| |
| <!-- Image card --> |
| <style> |
| .demo-card-image.mdl-card { |
| width: 256px; |
| height: 256px; |
| background: url('../assets/demos/image_card.jpg') center / cover; |
| } |
| .demo-card-image > .mdl-card__actions { |
| height: 52px; |
| padding: 16px; |
| background: rgba(0, 0, 0, 0.2); |
| } |
| .demo-card-image__filename { |
| color: #fff; |
| font-size: 14px; |
| font-weight: 500; |
| } |
| </style> |
| |
| <div class="demo-card-image mdl-card mdl-shadow--2dp"> |
| <div class="mdl-card__title mdl-card--expand"></div> |
| <div class="mdl-card__actions"> |
| <span class="demo-card-image__filename">Image.jpg</span> |
| </div> |
| </div> |
| |
| <!-- Square card --> |
| <style> |
| .demo-card-square.mdl-card { |
| width: 320px; |
| height: 320px; |
| } |
| .demo-card-square > .mdl-card__title { |
| color: #fff; |
| background: |
| url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC; |
| } |
| </style> |
| |
| <div class="demo-card-square mdl-card mdl-shadow--2dp"> |
| <div class="mdl-card__title mdl-card--expand"> |
| <h2 class="mdl-card__title-text">Update</h2> |
| </div> |
| <div class="mdl-card__supporting-text"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Aenan convallis. |
| </div> |
| <div class="mdl-card__actions mdl-card--border"> |
| <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
| View Updates |
| </a> |
| </div> |
| </div> |
| |
| <!-- Wide card with share menu button --> |
| <style> |
| .demo-card-wide.mdl-card { |
| width: 512px; |
| } |
| .demo-card-wide > .mdl-card__title { |
| color: #fff; |
| height: 176px; |
| background: url('../assets/demos/welcome_card.jpg') center / cover; |
| } |
| .demo-card-wide > .mdl-card__menu { |
| color: #fff; |
| } |
| </style> |
| |
| <div class="demo-card-wide mdl-card mdl-shadow--2dp"> |
| <div class="mdl-card__title"> |
| <h2 class="mdl-card__title-text">Welcome</h2> |
| </div> |
| <div class="mdl-card__supporting-text"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Mauris sagittis pellentesque lacus eleifend lacinia... |
| </div> |
| <div class="mdl-card__actions mdl-card--border"> |
| <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
| Get Started |
| </a> |
| </div> |
| <div class="mdl-card__menu"> |
| <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> |
| <i class="material-icons">share</i> |
| </button> |
| </div> |
| </div> |
| |
| |
| </div> |
| <!-- Built with love using Material Design Lite --> |
| |
| |
| <script> |
| |
| </script> |
| </body> |
| </html> |