third_party/ot-br-posix/repo/third_party/mdl/repo/src/card/snippets/square.html

   1 <!-- Square card -->
   2 <style>
   3 .demo-card-square.mdl-card {
   4   width: 320px;
   5   height: 320px;
   6 }
   7 .demo-card-square > .mdl-card__title {
   8   color: #fff;
   9   background:
  10     url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
  11 }
  12 </style>
  13
  14 <div class="demo-card-square mdl-card mdl-shadow--2dp">
  15   <div class="mdl-card__title mdl-card--expand">
  16     <h2 class="mdl-card__title-text">Update</h2>
  17   </div>
  18   <div class="mdl-card__supporting-text">
  19     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  20     Aenan convallis.
  21   </div>
  22   <div class="mdl-card__actions mdl-card--border">
  23     <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
  24       View Updates
  25     </a>
  26   </div>
  27 </div>