-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontent-elements.html
277 lines (237 loc) · 13.8 KB
/
content-elements.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!--
~ Copyright (c) BSI Business Systems Integration AG. All rights reserved.
~ http://www.bsiag.com/
-->
<!doctype html>
<html lang="de">
<head>
<title>Unicorn Content Elements</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{designBaseUrl}}/css/main.css"/>
</head>
<body>
<!-- Group: CONTENT -->
<div data-bsi-group="content">
<!-- Content Element: Title -->
<div data-bsi-element="title" class="title">
<h2 data-bsi-element-part="plain-text">{{bsi.nls "title_"}}</h2>
</div>
<!-- Content Element: Text only -->
<div data-bsi-element="text" data-bsi-element-part="formatted-text" class="text">{{bsi.nls "text_"}}</div>
<!-- Content Element: Text with Image -->
<div data-bsi-element="text-with-image" class="text-with-image">
<img src="{{designBaseUrl}}/img/cute-kitty.jpg" class="image" data-bsi-element-part="image">
<div class="text" data-bsi-element-part="formatted-text">{{bsi.nls "image.caption_"}}</div>
</div>
<!-- Content Element: Single Image -->
<div data-bsi-element="single-image" class="single-image">
<img src="{{designBaseUrl}}/img/cute-kitty.jpg" data-bsi-element-part="image">
</div>
<!-- Content Element: Srcset Image -->
<div data-bsi-element="srcset-image" class="srcset-image">
<img src="{{designBaseUrl}}/img/cute-kitty-150.jpg"
srcset="{{designBaseUrl}}/img/cute-kitty-150.jpg 150w,
{{designBaseUrl}}/img/cute-kitty-300.jpg 300w,
{{designBaseUrl}}/img/cute-kitty-500.jpg 500w"
sizes="(max-width: 500px) 150px,
(max-width: 750px) 300px,
500px"
data-bsi-element-part="image">
</div>
<!-- Content Element: CTA Button -->
<div data-bsi-element="cta-button" class="cta-button-container">
<a data-bsi-element-part="link" class="cta-button">{{bsi.nls "action"}}</a>
</div>
<!-- Content-Element: Bullet list -->
<div data-bsi-element="bullet-list" class="bullet-list">
<p>{{bsi.nls "enumeration"}}</p>
<ul data-bsi-element-part="iterator" data-bsi-iterator="">
<li data-bsi-iterator-item="" data-bsi-element-part="formatted-text"></li>
</ul>
</div>
<!-- Content Element: content-container-with-box -->
<div data-bsi-element="content-container-with-box" class="content-container-with-box">
<div class="content-container-column-left" data-bsi-dropzone="content-container-column-left"
data-bsi-dropzone-allowed-elements="title text single-image srcset-image text-with-image bullet-list qr-code table html social-follow social-share cta-button rest-call">
<div data-bsi-element="single-image" class="single-image">
<img src="{{designBaseUrl}}/img/unicorn.jpg" data-bsi-element-part="image">
</div>
</div>
<div class="content-container-column-right" data-bsi-dropzone="content-container-column-right"
data-bsi-dropzone-allowed-elements="title text single-image srcset-image bullet-list qr-code single-column-form table html social-follow social-share cta-button rest-call">
<div data-bsi-element="text" data-bsi-element-part="formatted-text" class="text">{{bsi.nls "text_"}}</div>
</div>
</div>
<!-- Content Element: table -->
<div data-bsi-element="table" data-bsi-element-part="table" class="table">
<table>
<tr>
<th>{{bsi.nls "column"}} 1</th>
<th>{{bsi.nls "column"}} 2</th>
<th>{{bsi.nls "column"}} 3</th>
</tr>
<tr>
<td>{{bsi.nls "text_"}}</td>
<td>{{bsi.nls "text_"}}</td>
<td>{{bsi.nls "text_"}}</td>
</tr>
</table>
</div>
</div><!-- EOF Group: CONTENT -->
<!-- Group: FORMS -->
<div data-bsi-group="forms">
<!-- Content Element: Single Column Form -->
<form class="form single-column-form" data-bsi-element="single-column-form" data-bsi-element-part="form" data-bsi-show-form-type-field="true">
<div class="form-validation" data-bsi-form-validation>
<div class="form-validation-item" data-bsi-form-validation-item></div>
</div>
<div class="form-content" data-bsi-dropzone="form-content"
data-bsi-dropzone-allowed-elements="form-field form-checkbox form-textarea form-select form-radio"></div>
<div class="form-button-bar">
<div class="form-button-container submit">
<button type="submit" class="form-button send">{{bsi.nls "send"}}</button>
</div>
<div class="form-button-container reset">
<button type="reset" class="form-button reset">{{bsi.nls "reset"}}</button>
</div>
</div>
</form>
<!-- Content Element: Two Column Form -->
<form class="form two-column-form" data-bsi-element="two-column-form" data-bsi-element-part="form" data-bsi-show-form-type-field="true">
<div class="form-validation" data-bsi-form-validation>
<div class="form-validation-item" data-bsi-form-validation-item></div>
</div>
<div class="form-column-left form-content" data-bsi-dropzone="form-column-left"
data-bsi-dropzone-allowed-elements="form-field form-checkbox form-textarea form-select form-radio"></div>
<div class="form-column-right form-content" data-bsi-dropzone="form-column-right"
data-bsi-dropzone-allowed-elements="form-field form-checkbox form-textarea form-select form-radio"></div>
<div class="form-button-bar">
<div class="form-button-container submit">
<button type="submit" class="form-button send">{{bsi.nls "send"}}</button>
</div>
<div class="form-button-container reset">
<button type="reset" class="form-button reset">{{bsi.nls "reset"}}</button>
</div>
</div>
</form>
<!-- Content Element: Form Text Field -->
<div data-bsi-element="form-field" data-bsi-element-part="form-field" class="form-field-container form-field">
<label></label>
<input type="text">
</div>
<!-- Content Element: Form Checkbox -->
<div data-bsi-element="form-checkbox" data-bsi-element-part="form-checkbox" class="form-field-container form-checkbox">
<input type="checkbox">
<label></label>
</div>
<!-- Content Element: Form Textarea -->
<div data-bsi-element="form-textarea" data-bsi-element-part="form-textarea" class="form-field-container form-textarea">
<label></label>
<textarea rows="7" maxlength="500"></textarea>
</div>
<!-- Content Element: Form Select -->
<div data-bsi-element="form-select" data-bsi-element-part="form-select" class="form-field-container form-select">
<label></label>
<select size="1">
<option><1. Option></option>
</select>
</div>
<!-- Content Element: Form Radio -->
<div data-bsi-element="form-radio" data-bsi-element-part="form-radio" class="form-field-container form-radio">
<label></label>
<div class="form-radio-group" data-bsi-radio-group>
<div class="form-radio-item" data-bsi-radio-item>
<input type="radio">
<label><1. Radio-Button></label>
</div>
</div>
</div>
</div>
<!-- Group: ADVANCED -->
<div data-bsi-group="advanced">
<!-- Content Element: HTML -->
<div data-bsi-element="html" data-bsi-element-part="html">
<div>
<strong style="color: #de63a4;">Pretty</strong> <u>HTML</u> Content
</div>
</div>
<!-- Content Element: Video, src attribute is set by the part -->
<div data-bsi-element="video" data-bsi-element-part="video" class="video-container">
<iframe width="560" height="315" frameborder="0" class="video" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<!-- Content Element: Video, src attribute is set by the part -->
<div data-bsi-element="video-thumbnail" data-bsi-element-part="video" class="video-container">
<img src="{{designBaseUrl}}/img/news-image.png" width="560" height="315" data-bsi-video-thumbnail=""/>
</div>
<!-- Content Element: Social follow -->
<div data-bsi-element="social-follow" data-bsi-element-part="social-follow" class="social-media-container">
<div class="social-media-info">Follow us</div>
<div data-bsi-social-follow="Facebook" class="sm-facebook social-media-item"><a href="https://www.facebook.com/" class="fab fa-facebook-square" target="_blank"></a></div>
<div data-bsi-social-follow="Google+" class="sm-google-plus social-media-item"><a href="https://plus.google.com/" class="fab fa-google-plus-square" target="_blank"></a></div>
<div data-bsi-social-follow="Twitter" class="sm-twitter social-media-item"><a href="https://twitter.com/" class="fab fa-twitter-square" target="_blank"></a></div>
</div>
<!-- Content Element: Social share -->
<div data-bsi-element="social-share" data-bsi-element-part="social-share" class="social-media-container">
<div class="social-media-info">Share this page</div>
<div data-bsi-social-share="E-Mail" class="sm-email social-media-item share"><a href="mailto:?subject=(subject.with.title)&body=(description.with.url)" class="fas fa-envelope-square"></a></div>
<div data-bsi-social-share="Facebook" class="sm-facebook social-media-item share"><a href="https://www.facebook.com/sharer/sharer.php?u=(url)" class="fab fa-facebook-square" target="_blank"></a></div>
<div data-bsi-social-share="Google+" class="sm-google-plus social-media-item share"><a href="https://plus.google.com/share?url=(url)" class="fab fa-google-plus-square" target="_blank"></a></div>
<div data-bsi-social-share="LinkedIn" class="sm-linkedin social-media-item share"><a href="https://www.linkedin.com/shareArticle?mini=true&url=(url)&summary=(title)&source=FancyUnicorns" class="fab fa-linkedin" target="_blank"></a></div>
<div data-bsi-social-share="Pinterest" class="sm-pinterest social-media-item share"><a href="http://pinterest.com/pin/create/button/?url=(url)&description=(title)&media=(preview.image.url)" class="fab fa-pinterest-square" target="_blank"></a></div>
<div data-bsi-social-share="Twitter" class="sm-twitter social-media-item share"><a href="https://twitter.com/intent/tweet?url=(url)&text=(description.short)" class="fab fa-twitter-square" target="_blank"></a></div>
<div data-bsi-social-share="WhatsApp" class="sm-whatsapp social-media-item share"><a href="whatsapp://send?text=(title.with.url)" class="fab fa-whatsapp-square" target="_blank"></a></div>
<div data-bsi-social-share="Xing" class="sm-xing social-media-item share"><a href="https://www.xing.com/spi/shares/new?url=(url)" class="fab fa-xing-square" target="_blank"></a></div>
</div>
<!-- Content Element: News snippets -->
<div data-bsi-element="news-snippets" data-bsi-element-part="news-snippets" class="news-snippets">
<div data-bsi-news-snippet class="news-snippet">
<img class="ns-image" src="{{designBaseUrl}}/img/news-image.png" data-bsi-property="image"> <!-- will be wrapped in an A element if NS item has a link -->
<h3 class="ns-title" data-bsi-property="title">Breaking News</h3> <!-- will be wrapped in an A element if NS item has a link -->
<p class="ns-headline" data-bsi-property="headline">Alien Life May Exist on Exoplanet Moons</p>
<p class="ns-text" data-bsi-property="text">Lorem ipsum dolor sit amet, ea vis odio voluptua, pri ei facer denique. Nobis minimum lucilius cum ei,
at mel everti vocibus. Mea vide vidit option ut, placerat instructior eu mei, ei dolor tation latine mea.</p>
</div>
</div>
<!-- Content Element: QR-Code -->
<div data-bsi-element="qr-code" class="qr-code">
<img src="<QR Code>" class="image" data-bsi-element-part="image" data-bsi-placeholder="{{designBaseUrl}}/img/qr-code.png" data-bsi-dynamic-src="true">
</div>
<!-- Content Element: Survey -->
<div data-bsi-element="5-star-survey" class="5-star-survey">
<a href="[survey-star-1]" data-bsi-element-part="link" data-bsi-link-fixed-inner-html=""><img src="{{designBaseUrl}}/img/star.png" class="survey-star"></a>
<a href="[survey-star-2]" data-bsi-element-part="link" data-bsi-link-fixed-inner-html=""><img src="{{designBaseUrl}}/img/star.png" class="survey-star"></a>
<a href="[survey-star-3]" data-bsi-element-part="link" data-bsi-link-fixed-inner-html=""><img src="{{designBaseUrl}}/img/star.png" class="survey-star"></a>
<a href="[survey-star-4]" data-bsi-element-part="link" data-bsi-link-fixed-inner-html=""><img src="{{designBaseUrl}}/img/star.png" class="survey-star"></a>
<a href="[survey-star-5]" data-bsi-element-part="link" data-bsi-link-fixed-inner-html=""><img src="{{designBaseUrl}}/img/star.png" class="survey-star"></a>
</div>
<!-- Content Element: REST Call -->
<div data-bsi-element="rest-call" class="rest-call">
<form class="rest-call-form" id="rest-call-form">
<div class="rest-title">Request:</div>
<div class="rest-request">
<select id="request-method">
<option value="GET" selected>GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
</select>
<input type="text" id="request-url" value="api/story-property/happy">
<button>Call</button>
</div>
<div class="rest-title">Request Payload:</div>
<textarea id="request-payload">{"happy": true}</textarea>
<div class="rest-title">Response:</div>
<div id="rest-response">n/a</div>
</form>
</div>
</div>
<!-- Group: MASTER -->
<div data-bsi-group="master">
<div data-bsi-element="master-header">
<img src="{{designBaseUrl}}/img/nyan-cat.gif">
<h1 data-bsi-element-part="plain-text">{{bsi.nls "website.title"}}</h1>
</div>
</div>
</body>
</html>