blob: b5407c319adb4023d990584fde936655618e03b6 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!-- Event card -->
2<style>
3.demo-card-event.mdl-card {
4 width: 256px;
5 height: 256px;
6 background: #3E4EB8;
7}
8.demo-card-event > .mdl-card__actions {
9 border-color: rgba(255, 255, 255, 0.2);
10}
11.demo-card-event > .mdl-card__title {
12 align-items: flex-start;
13}
14.demo-card-event > .mdl-card__title > h4 {
15 margin-top: 0;
16}
17.demo-card-event > .mdl-card__actions {
18 display: flex;
19 box-sizing:border-box;
20 align-items: center;
21}
22.demo-card-event > .mdl-card__actions > .material-icons {
23 padding-right: 10px;
24}
25.demo-card-event > .mdl-card__title,
26.demo-card-event > .mdl-card__actions,
27.demo-card-event > .mdl-card__actions > .mdl-button {
28 color: #fff;
29}
30</style>
31
32<div class="demo-card-event mdl-card mdl-shadow--2dp">
33 <div class="mdl-card__title mdl-card--expand">
34 <h4>
35 Featured event:<br>
36 May 24, 2016<br>
37 7-11pm
38 </h4>
39 </div>
40 <div class="mdl-card__actions mdl-card--border">
41 <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
42 Add to Calendar
43 </a>
44 <div class="mdl-layout-spacer"></div>
45 <i class="material-icons">event</i>
46 </div>
47</div>