blob: b9e1eb819d71f1ebc92a331aa24f1be6cbdb637a [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>card test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23
24 </style>
25
26 </head>
27 <body>
28
29 <div style="padding-top: 24px;">
30
31
32<!-- Event card -->
33<style>
34.demo-card-event.mdl-card {
35 width: 256px;
36 height: 256px;
37 background: #3E4EB8;
38}
39.demo-card-event > .mdl-card__actions {
40 border-color: rgba(255, 255, 255, 0.2);
41}
42.demo-card-event > .mdl-card__title {
43 align-items: flex-start;
44}
45.demo-card-event > .mdl-card__title > h4 {
46 margin-top: 0;
47}
48.demo-card-event > .mdl-card__actions {
49 display: flex;
50 box-sizing:border-box;
51 align-items: center;
52}
53.demo-card-event > .mdl-card__actions > .material-icons {
54 padding-right: 10px;
55}
56.demo-card-event > .mdl-card__title,
57.demo-card-event > .mdl-card__actions,
58.demo-card-event > .mdl-card__actions > .mdl-button {
59 color: #fff;
60}
61</style>
62
63<div class="demo-card-event mdl-card mdl-shadow--2dp">
64 <div class="mdl-card__title mdl-card--expand">
65 <h4>
66 Featured event:<br>
67 May 24, 2016<br>
68 7-11pm
69 </h4>
70 </div>
71 <div class="mdl-card__actions mdl-card--border">
72 <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
73 Add to Calendar
74 </a>
75 <div class="mdl-layout-spacer"></div>
76 <i class="material-icons">event</i>
77 </div>
78</div>
79
80<!-- Image card -->
81<style>
82.demo-card-image.mdl-card {
83 width: 256px;
84 height: 256px;
85 background: url('../assets/demos/image_card.jpg') center / cover;
86}
87.demo-card-image > .mdl-card__actions {
88 height: 52px;
89 padding: 16px;
90 background: rgba(0, 0, 0, 0.2);
91}
92.demo-card-image__filename {
93 color: #fff;
94 font-size: 14px;
95 font-weight: 500;
96}
97</style>
98
99<div class="demo-card-image mdl-card mdl-shadow--2dp">
100 <div class="mdl-card__title mdl-card--expand"></div>
101 <div class="mdl-card__actions">
102 <span class="demo-card-image__filename">Image.jpg</span>
103 </div>
104</div>
105
106<!-- Square card -->
107<style>
108.demo-card-square.mdl-card {
109 width: 320px;
110 height: 320px;
111}
112.demo-card-square > .mdl-card__title {
113 color: #fff;
114 background:
115 url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
116}
117</style>
118
119<div class="demo-card-square mdl-card mdl-shadow--2dp">
120 <div class="mdl-card__title mdl-card--expand">
121 <h2 class="mdl-card__title-text">Update</h2>
122 </div>
123 <div class="mdl-card__supporting-text">
124 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
125 Aenan convallis.
126 </div>
127 <div class="mdl-card__actions mdl-card--border">
128 <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
129 View Updates
130 </a>
131 </div>
132</div>
133
134<!-- Wide card with share menu button -->
135<style>
136.demo-card-wide.mdl-card {
137 width: 512px;
138}
139.demo-card-wide > .mdl-card__title {
140 color: #fff;
141 height: 176px;
142 background: url('../assets/demos/welcome_card.jpg') center / cover;
143}
144.demo-card-wide > .mdl-card__menu {
145 color: #fff;
146}
147</style>
148
149<div class="demo-card-wide mdl-card mdl-shadow--2dp">
150 <div class="mdl-card__title">
151 <h2 class="mdl-card__title-text">Welcome</h2>
152 </div>
153 <div class="mdl-card__supporting-text">
154 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
155 Mauris sagittis pellentesque lacus eleifend lacinia...
156 </div>
157 <div class="mdl-card__actions mdl-card--border">
158 <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
159 Get Started
160 </a>
161 </div>
162 <div class="mdl-card__menu">
163 <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
164 <i class="material-icons">share</i>
165 </button>
166 </div>
167</div>
168
169
170 </div>
171 <!-- Built with love using Material Design Lite -->
172
173
174 <script>
175
176 </script>
177 </body>
178</html>