Skip to content

Commit 8ca8745

Browse files
author
Manaday Mavani
committed
doc(uc-image): sample usage html
1 parent 19d92bf commit 8ca8745

File tree

1 file changed

+132
-0
lines changed

1 file changed

+132
-0
lines changed

‎examples/uc-image/index.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>uc-image demo</title>
8+
<style>
9+
uc-image {
10+
display: block;
11+
margin: 1em 0;
12+
}
13+
</style>
14+
<script type="module"
15+
src="https://unpkg.com/util-web-components/dist/util-components/util-components.esm.js"></script>
16+
<script nomodule src="https://unpkg.com/util-web-components/dist/util-components/util-components.js"></script>
17+
</head>
18+
19+
<body>
20+
<uc-image src='https://placekitten.com/400/400' width='400' height='400' alt='' class='smartImage'></uc-image>
21+
<uc-image src='https://placekitten.com/401/401' width='401' height='401' alt=''></uc-image>
22+
<uc-image src='https://placekitten.com/402/402' width='402' height='402' alt=''></uc-image>
23+
<uc-image src='https://placekitten.com/403/403' width='403' height='403' alt=''></uc-image>
24+
<uc-image src='https://placekitten.com/404/404' width='404' height='404' alt=''></uc-image>
25+
<uc-image src='https://placekitten.com/405/405' width='405' height='405' alt=''></uc-image>
26+
<uc-image src='https://placekitten.com/406/406' width='406' height='406' alt=''></uc-image>
27+
<uc-image src='https://placekitten.com/407/407' width='407' height='407' alt=''></uc-image>
28+
<uc-image src='https://placekitten.com/408/408' width='408' height='408' alt=''></uc-image>
29+
<uc-image src='https://placekitten.com/409/409' width='409' height='409' alt=''></uc-image>
30+
<uc-image src='https://placekitten.com/410/410' width='410' height='410' alt=''></uc-image>
31+
<uc-image src='https://developer.mozilla.org/static/img/favicon72.png'
32+
srcset='https://developer.mozilla.org/static/img/favicon144.png 2x' alt='MDN logo' width='410' height='410'>
33+
</uc-image>
34+
<uc-image
35+
src='https://media.prod.mdn.mozit.cloud/attachments/2019/08/29/16864/c77b83ecdb4ce4a6507da42aa7e8585e/clock-demo-200px.png'
36+
srcset='https://media.prod.mdn.mozit.cloud/attachments/2019/08/29/16864/c77b83ecdb4ce4a6507da42aa7e8585e/clock-demo-200px.png 200w, https://media.prod.mdn.mozit.cloud/attachments/2019/07/15/16797/4c169938d5f923bfa4db5ee937f24ebe/clock-demo-400px.png 400w'
37+
sizes='(max-width: 600px) 200px, 50vw' alt='Clock'>
38+
</uc-image>
39+
<uc-image src='https://placekitten.com/411/411' width='411' height='411' alt=''></uc-image>
40+
<uc-image src='https://placekitten.com/412/412' width='412' height='412' alt=''></uc-image>
41+
<uc-image src='https://placekitten.com/413/413' width='413' height='413' alt=''></uc-image>
42+
<uc-image src='https://placekitten.com/414/414' width='414' height='414' alt=''></uc-image>
43+
<uc-image src='https://placekitten.com/415/415' width='415' height='415' alt=''></uc-image>
44+
<uc-image src='https://interactive-examples.mdn.mozilla.net/media/cc0-images/painted-hand-298-332.jpg' width='415'
45+
height='415' alt=''>
46+
<source srcset='https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg'
47+
media='(min-width: 800px)'>
48+
</uc-image>
49+
<uc-image src='https://placekitten.com/416/416' width='416' height='416' alt=''></uc-image>
50+
<uc-image src='https://placekitten.com/417/417' width='417' height='417' alt=''></uc-image>
51+
<uc-image src='https://placekitten.com/418/418' width='418' height='418' alt=''></uc-image>
52+
<uc-image src='https://placekitten.com/419/419' width='419' height='419' alt=''></uc-image>
53+
<uc-image src='https://placekitten.com/420/420' width='420' height='420' alt=''></uc-image>
54+
<uc-image src='https://placekitten.com/421/421' width='421' height='421' alt=''></uc-image>
55+
<uc-image src='https://placekitten.com/422/422' width='422' height='422' alt=''></uc-image>
56+
<uc-image src='https://placekitten.com/423/423' width='423' height='423' alt=''></uc-image>
57+
<uc-image src='https://placekitten.com/424/424' width='424' height='424' alt=''></uc-image>
58+
<uc-image src='https://placekitten.com/425/425' width='425' height='425' alt=''></uc-image>
59+
<uc-image src='https://placekitten.com/426/426' width='426' height='426' alt=''></uc-image>
60+
<uc-image src='https://placekitten.com/427/427' width='427' height='427' alt=''></uc-image>
61+
<uc-image src='https://placekitten.com/428/428' width='428' height='428' alt=''></uc-image>
62+
<uc-image src='https://placekitten.com/429/429' width='429' height='429' alt=''></uc-image>
63+
<uc-image src='https://placekitten.com/430/430' width='430' height='430' alt=''></uc-image>
64+
<uc-image src='https://placekitten.com/431/431' width='431' height='431' alt=''></uc-image>
65+
<uc-image src='https://placekitten.com/432/432' width='432' height='432' alt=''></uc-image>
66+
<uc-image src='https://placekitten.com/433/433' width='433' height='433' alt=''></uc-image>
67+
<uc-image src='https://placekitten.com/434/434' width='434' height='434' alt=''></uc-image>
68+
<uc-image src='https://placekitten.com/435/435' width='435' height='435' alt=''></uc-image>
69+
<uc-image src='https://placekitten.com/436/436' width='436' height='436' alt=''></uc-image>
70+
<uc-image src='https://placekitten.com/437/437' width='437' height='437' alt=''></uc-image>
71+
<uc-image src='https://placekitten.com/438/438' width='438' height='438' alt=''></uc-image>
72+
<uc-image src='https://placekitten.com/439/439' width='439' height='439' alt=''></uc-image>
73+
<uc-image src='https://placekitten.com/440/440' width='440' height='440' alt=''></uc-image>
74+
<uc-image src='https://placekitten.com/441/441' width='441' height='441' alt=''></uc-image>
75+
<uc-image src='https://placekitten.com/442/442' width='442' height='442' alt=''></uc-image>
76+
<uc-image src='https://placekitten.com/443/443' width='443' height='443' alt=''></uc-image>
77+
<uc-image src='https://placekitten.com/444/444' width='444' height='444' alt=''></uc-image>
78+
<uc-image src='https://placekitten.com/445/445' width='445' height='445' alt=''></uc-image>
79+
<uc-image src='https://placekitten.com/446/446' width='446' height='446' alt=''></uc-image>
80+
<uc-image src='https://placekitten.com/447/447' width='447' height='447' alt=''></uc-image>
81+
<uc-image src='https://placekitten.com/448/448' width='448' height='448' alt=''></uc-image>
82+
<uc-image src='https://placekitten.com/449/449' width='449' height='449' alt=''></uc-image>
83+
<uc-image src='https://placekitten.com/450/450' width='450' height='450' alt=''></uc-image>
84+
<uc-image src='https://placekitten.com/451/451' width='451' height='451' alt=''></uc-image>
85+
<uc-image src='https://placekitten.com/452/452' width='452' height='452' alt=''></uc-image>
86+
<uc-image src='https://placekitten.com/453/453' width='453' height='453' alt=''></uc-image>
87+
<uc-image src='https://placekitten.com/454/454' width='454' height='454' alt=''></uc-image>
88+
<uc-image src='https://placekitten.com/455/455' width='455' height='455' alt=''></uc-image>
89+
<uc-image src='https://placekitten.com/456/456' width='456' height='456' alt=''></uc-image>
90+
<uc-image src='https://placekitten.com/457/457' width='457' height='457' alt=''></uc-image>
91+
<uc-image src='https://placekitten.com/458/458' width='458' height='458' alt=''></uc-image>
92+
<uc-image src='https://placekitten.com/459/459' width='459' height='459' alt=''></uc-image>
93+
<uc-image src='https://placekitten.com/460/460' width='460' height='460' alt=''></uc-image>
94+
<uc-image src='https://placekitten.com/461/461' width='461' height='461' alt=''></uc-image>
95+
<uc-image src='https://placekitten.com/462/462' width='462' height='462' alt=''></uc-image>
96+
<uc-image src='https://placekitten.com/463/463' width='463' height='463' alt=''></uc-image>
97+
<uc-image src='https://placekitten.com/464/464' width='464' height='464' alt=''></uc-image>
98+
<uc-image src='https://placekitten.com/465/465' width='465' height='465' alt=''></uc-image>
99+
<uc-image src='https://placekitten.com/466/466' width='466' height='466' alt=''></uc-image>
100+
<uc-image src='https://placekitten.com/467/467' width='467' height='467' alt=''></uc-image>
101+
<uc-image src='https://placekitten.com/468/468' width='468' height='468' alt=''></uc-image>
102+
<uc-image src='https://placekitten.com/469/469' width='469' height='469' alt=''></uc-image>
103+
<uc-image src='https://placekitten.com/470/470' width='470' height='470' alt=''></uc-image>
104+
<uc-image src='https://placekitten.com/471/471' width='471' height='471' alt=''></uc-image>
105+
<uc-image src='https://placekitten.com/472/472' width='472' height='472' alt=''></uc-image>
106+
<uc-image src='https://placekitten.com/473/473' width='473' height='473' alt=''></uc-image>
107+
<uc-image src='https://placekitten.com/474/474' width='474' height='474' alt=''></uc-image>
108+
<uc-image src='https://placekitten.com/475/475' width='475' height='475' alt=''></uc-image>
109+
<uc-image src='https://placekitten.com/476/476' width='476' height='476' alt=''></uc-image>
110+
<uc-image src='https://placekitten.com/477/477' width='477' height='477' alt=''></uc-image>
111+
<uc-image src='https://placekitten.com/478/478' width='478' height='478' alt=''></uc-image>
112+
<uc-image src='https://placekitten.com/479/479' width='479' height='479' alt=''></uc-image>
113+
<uc-image src='https://placekitten.com/480/480' width='480' height='480' alt=''></uc-image>
114+
<uc-image src='https://placekitten.com/481/481' width='481' height='481' alt=''></uc-image>
115+
<uc-image src='https://placekitten.com/482/482' width='482' height='482' alt=''></uc-image>
116+
<uc-image src='https://placekitten.com/483/483' width='483' height='483' alt=''></uc-image>
117+
<uc-image src='https://placekitten.com/484/484' width='484' height='484' alt=''></uc-image>
118+
<uc-image src='https://placekitten.com/485/485' width='485' height='485' alt=''></uc-image>
119+
<uc-image src='https://placekitten.com/486/486' width='486' height='486' alt=''></uc-image>
120+
<uc-image src='https://placekitten.com/487/487' width='487' height='487' alt=''></uc-image>
121+
<uc-image src='https://placekitten.com/488/488' width='488' height='488' alt=''></uc-image>
122+
<uc-image src='https://placekitten.com/489/489' width='489' height='489' alt=''></uc-image>
123+
<uc-image src='https://placekitten.com/490/490' width='490' height='490' alt=''></uc-image>
124+
<uc-image src='https://placekitten.com/491/491' width='491' height='491' alt=''></uc-image>
125+
<uc-image src='https://placekitten.com/492/492' width='492' height='492' alt=''></uc-image>
126+
<uc-image src='https://placekitten.com/493/493' width='493' height='493' alt=''></uc-image>
127+
<uc-image src='https://placekitten.com/494/494' width='494' height='494' alt=''></uc-image>
128+
<uc-image src='https://placekitten.com/495/495' width='495' height='495' alt=''></uc-image>
129+
<uc-image src='https://placekitten.com/496/496' width='496' height='496' alt=''></uc-image>
130+
</body>
131+
132+
</html>

0 commit comments

Comments
 (0)