demo.html revision 1320f92c476a1ad9d19dba2a48c72b75566198e9 
1<!doctype html>
2<html>
3<head>
4
5  <title>core-item</title>
6
7  <script src="/platform/platform.js"></script>
8
9  <link rel="import" href="/core-icons/core-icons.html">
10  <link rel="import" href="core-item.html">
11
12  <style>
13  
14    body {
15      font-family: sans-serif;
16      font-size: 16px;
17      margin: 20px;
18    }
19    
20    core-item {
21      width: 300px;
22    }
23
24    core-item.big {
25      font-size: 24px;
26    }
27
28    core-item.small {
29      font-size: 12px;
30    }
31    
32    core-item.contact-item {
33      height: 50px;
34      background-color: #efefef;
35      border: 1px solid #ddd;
36    }
37
38    core-item.contact-item .name {
39      font-size: 1.125em;
40    }
41
42    core-item.contact-item .address {
43      font-size: 0.75em;
44    }
45    
46  </style>
47
48</head>
49<body unresolved>
50
51    <h2>items with icon and label:</h2>
52
53    <core-item icon="settings" label="Settings"></core-item>
54    <core-item icon="account-box" label="Account"></core-item>
55    
56    <h2>items with label only:</h2>
57
58    <core-item label="Settings"></core-item>
59    <core-item label="Account"></core-item>
60    
61    <h2>links (via &lt;a&gt;):</h2>
62    
63    <core-item icon="settings" label="Settings"><a href="#settings" target="_self"></a></core-item>
64    <core-item icon="account-box" label="Account"><a href="#account" target="_self"></a></core-item>
65
66    <h2>items sized with CSS:</h2>
67    <core-item icon="settings" label="Settings" class="font-scalable big"></core-item>
68    <core-item icon="account-box" label="Account" class="font-scalable big"></core-item>
69    <core-item icon="settings" label="Settings" class="font-scalable small"></core-item>
70    <core-item icon="account-box" label="Account" class="font-scalable small"></core-item>
71    
72    <h2>custom item:</h2>
73    
74    <core-item icon="account-circle" class="contact-item">
75      <div flex>
76        <div class="name">John Doe</div>
77        <div class="address">123 A Street, San Francisco, CA</div>
78      </div>
79      <core-icon icon="more-vert"></core-icon>
80    </core-item>
81
82</body>
83</html>
84