generated from daviddarnes/component-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (65 loc) · 2.91 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Demo of link-preview Web Component" />
<title><link-preview> Web Component Demo</title>
<script type="module" src="link-preview.js"></script>
</head>
<body>
<h2>General usage example</h2>
<p>Some examples of links previews:</p>
<ul>
<li>
<link-preview>
<a href="">Link to page</a>
</link-preview>
</li>
<li>
<link-preview>
<a href="https://css.winterveil.net/">Link to remote page with CORS enabled</a>
</link-preview>
</li>
<li>
<link-preview>
<a href="#subject1">Fragment link to sub-page header</a>
</link-preview>
</li>
<li>
<link-preview>
<a href="#subject2">Fragment link to sub-page section</a>
</link-preview>
</li>
</ul>
<hr />
<h3>Demo content</h3>
<h4 id="subject1">Subject title 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Sit amet nulla facilisi morbi. Pharetra diam sit amet nisl
suscipit adipiscing. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi.
Ultrices gravida dictum fusce ut placerat orci nulla. Ornare quam viverra orci sagittis eu
volutpat odio facilisis mauris. Congue nisi vitae suscipit tellus. Ut enim blandit volutpat
maecenas volutpat blandit aliquam etiam erat. Placerat in egestas erat imperdiet sed.
Vulputate sapien nec sagittis aliquam malesuada. Cras fermentum odio eu feugiat pretium nibh
ipsum consequat. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras
tincidunt. Libero nunc consequat interdum varius sit amet. Lorem ipsum dolor sit amet.
</p>
<div id="subject2">
<h4>Subject title 2</h4>
<p>
Enim neque volutpat ac tincidunt. Accumsan lacus vel facilisis volutpat est velit egestas
dui. Gravida cum sociis natoque penatibus et magnis dis parturient. Tempor nec feugiat nisl
pretium. Nunc sed id semper risus in hendrerit. Enim praesent elementum facilisis leo vel
fringilla est ullamcorper eget. Id semper risus in hendrerit gravida rutrum quisque non.
Urna molestie at elementum eu facilisis sed odio morbi quis. Nibh mauris cursus mattis
molestie a. Mi quis hendrerit dolor magna eget est lorem. Congue quisque egestas diam in
arcu cursus euismod quis. Diam vulputate ut pharetra sit amet aliquam. At consectetur lorem
donec massa sapien faucibus. Pellentesque adipiscing commodo elit at. Integer eget aliquet
nibh praesent tristique magna. Euismod quis viverra nibh cras. Egestas sed tempus urna et
pharetra pharetra.
</p>
</div>
</body>
</html>