-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
44 lines (40 loc) · 2.04 KB
/
demo.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
<!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="" />
<title>pull-quote Web Component Demo</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #f8f8f8;
padding: 1em;
margin-bottom: 1em;
}
main {
padding: 1em;
max-width: 80vw;
margin: 0 auto;
}
</style>
<script type="module" src="pull-quote.js"></script>
</head>
<body>
<header>
<h1>pull-quote Web Component Demo</h1>
<p>Source code available at <a href="https://github.com./miklb/pull-quote/"><code>https://github.com./miklb/pull-quote/</code></a></p>
</header>
<main>
<p>Pull quotes can be useful in <pull-quote right>calling out a specific quote from a larger body of text</pull-quote>. This web component allows you to easily add a pull quote to your site. The component is built using web components, so it can be used in any web project, regardless of the framework or CMS you are using.</p>
<p>Here's a bunch of words that could be in the middle of an article that is really complex and deep but at some point an important fact <pull-quote>really needs to be emphasized to the reader</pull-quote>. But we don't want to take the words out of the flow of the writing or duplicate it but we're going to have a bunch more words to fill in the space. This paragraph needs a lot more words to make it effective.</p>
<p>Another paragraph for effect. And another sentence. Or more with feeling. I need to really figure out a way to generate text from the editor don't I?</p>
<p>Need more text and will add more text here and here and a bunch more words and more words. Now a period. But more words.</p>
</main>
</body>
</html>