markdown-ui 0.1.6 → 0.1.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. checksums.yaml +4 -4
  2. data/Changelog +6 -0
  3. data/README.md +1 -1
  4. data/exe/markdown-ui +10 -12
  5. data/lib/markdown-ui.rb +1 -7
  6. data/lib/markdown-ui/version.rb +1 -1
  7. data/markdown-ui.gemspec +6 -6
  8. data/website/button.html +524 -0
  9. data/website/button.md +535 -0
  10. data/website/compile.sh +8 -4
  11. data/website/index.html +498 -546
  12. data/website/index.md +598 -582
  13. metadata +10 -2
data/website/index.md CHANGED
@@ -1,671 +1,687 @@
1
- > Center Aligned Container:
2
- > > Inverted Segment Container:
3
- > > > Inverted Menu:
4
- > > > [Markdown UI](#home "basic")
5
- > > > > Inverted Right Menu:
6
- > > > > [Docs](#docs "disabled")
7
- > > > > [About](#about "disabled")
8
- > > > > [Github](#github)
9
- > > > > [Install](#install "disabled")
1
+ > Inverted Segment Container:
2
+ > > Inverted Menu:
3
+ > > [Markdown UI](#home "basic")
4
+ > > > Inverted Right Menu:
5
+ > > > [Docs](#docs "disabled")
6
+ > > > [About](#about "disabled")
7
+ > > > [Github](#github)
8
+ > > > [Install](#install "disabled")
9
+
10
+ <!-- -->
11
+
12
+ > Left Aligned Container:
10
13
  >
11
14
  > <!-- -->
12
15
  >
13
- > > Left Aligned Container:
14
- > >
15
- > > <!-- -->
16
- > >
17
- > > > Inverted Attached Teal Very Padded Segment:
18
- > > > # Markdown UI
19
- > > > ### Responsive UI in Markdown
16
+ > > Inverted Attached Teal Very Padded Segment:
17
+ > > # Markdown UI
18
+ > > ### Responsive UI in Markdown
19
+ >
20
+ > <!-- -->
21
+ >
22
+ > > Attached Segment:
20
23
  > >
21
24
  > > <!-- -->
22
25
  > >
23
- > > > Attached Segment:
26
+ > > > Equal Width Grid:
27
+ > > > > Column:
28
+ > > > > ##Installation
29
+ > > > > ```gem install markdown-ui```
30
+ > > > > ##Usage
31
+ > > > > ```markdown-ui index.mdui > index.html```
32
+ > > > > ##Credits
33
+ > > > > Markdown-UI uses [Semantic-UI http：//www.semantic-ui.com](http：//www.semantic-ui.com) syntax and framework, and ruby ```redcarpet``` library.
34
+ > > > > Credit goes to the people behind these wonderful framework and libraries.
35
+ > > > > ##Issues/Bugs
36
+ > > > > * Ongoing support for Semantic-UI elements/modules/components
37
+ > > > > * The Colon (：) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URL's)"
38
+ > > > > * Code is not DRY, needs refactoring.
39
+ > > > > * Implimentation is subject to change
40
+ > > > > * A separator in between two spaces is required on block elements to separate elements (see Column example)
24
41
  > > >
25
42
  > > > <!-- -->
26
43
  > > >
27
- > > > > Equal Width Grid:
28
- > > > > > Column:
29
- > > > > > ##Installation
30
- > > > > > ```gem install markdown-ui```
31
- > > > > > ##Usage
32
- > > > > > ```markdown-ui index.mdui > index.html```
33
- > > > > > ##Credits
34
- > > > > > Markdown-UI uses [Semantic-UI http：//www.semantic-ui.com](http：//www.semantic-ui.com) syntax and framework, and ruby ```redcarpet``` library.
35
- > > > > > Credit goes to the people behind these wonderful framework and libraries.
36
- > > > > > ##Issues/Bugs
37
- > > > > > * Ongoing support for Semantic-UI elements/modules/components
38
- > > > > > * The Colon (：) character will be parsed when used inside a text, needs post-processing to dislay correctly (for URL's)"
39
- > > > > > * Code is not DRY, needs refactoring.
40
- > > > > > * Implimentation is subject to change
41
- > > > > > * A separator in between two spaces is required on block elements to separate elements (see Column example)
44
+ > > > > Column:
45
+ > > > > > Inverted Very Padded Segment:
46
+ > > > > > ```> Pointing Menu：``` <br />
47
+ > > > > > ```> [Home](#root "active")``` <br />
48
+ > > > > > ```> [Messages](#messages)``` <br />
49
+ > > > > > ```> [Friends](#friends)``` <br />
50
+ > > > > > ```> > Right Menu：``` <br />
51
+ > > > > > ```> > [Logout](#logout)``` <br />
52
+ > > > > > <br />
53
+ > > > > > ```__Button|Add Friend__```
54
+ >
55
+ > <!-- -->
56
+ >
57
+ > ##Cheat Sheet:Center Aligned
58
+ > > Equal Width Grid:
59
+ > > > Column:
60
+ > > > > Basic Segment:
61
+ > > > > ##### Button
62
+ > > > > > Info Message:
63
+ > > > > > ``` # Short-Hand ``` <br />
64
+ > > > > > ``` __Button|Button Text__ ```
65
+ > > > >
66
+ > > > > <!-- -->
67
+ > > > >
68
+ > > > > > Info Message:
69
+ > > > > > ``` # Block Syntax ``` <br />
70
+ > > > > > ``` > Button： ``` <br />
71
+ > > > > > ``` > Button Text ``` <br />
72
+ > > > >
73
+ > > > > <!-- -->
74
+ > > > >
75
+ > > > > ##### Container
76
+ > > > > > Info Message:
77
+ > > > > > ``` > Container： ``` <br />
78
+ > > > > > ``` > ``` <br />
79
+ > > > >
80
+ > > > > <!-- -->
81
+ > > > >
82
+ > > > > ##### Icon
83
+ > > > > > Info Message:
84
+ > > > > > ``` _Icon <Name>_ ``` <br />
85
+ > > > >
86
+ > > > > <!-- -->
87
+ > > > >
88
+ > > > > ##### Segment
89
+ > > > > > Info Message:
90
+ > > > > > ``` > Segment： ``` <br />
91
+ > > > > > ``` > ``` <br />
92
+ > > > >
93
+ > > > > <!-- -->
94
+ > > > >
95
+ > > > > ##### Menu
96
+ > > > > > Info Message:
97
+ > > > > > ``` > Menu： ``` <br />
98
+ > > > > > ``` > [Menu Item] ``` <br />
99
+ > > > >
100
+ > > > > <!-- -->
101
+ > > > >
102
+ > > > > ##### List
103
+ > > > > > Info Message:
104
+ > > > > > ``` * List 1 ``` <br />
105
+ > > > > > ``` * List 2 ``` <br />
106
+ > > > >
107
+ > > > > <!-- -->
108
+ > > > >
109
+ > > > > ##### Label
110
+ > > > > > Info Message:
111
+ > > > > > ``` > Label： ``` <br />
112
+ > > > > > ``` > _Mail Icon_ 23 ``` <br />
42
113
  > > > >
43
114
  > > > > <!-- -->
44
115
  > > > >
45
- > > > > > Column:
46
- > > > > > > Inverted Very Padded Segment:
47
- > > > > > > ```> Pointing Menu：``` <br />
48
- > > > > > > ```> [Home](#root "active")``` <br />
49
- > > > > > > ```> [Messages](#messages)``` <br />
50
- > > > > > > ```> [Friends](#friends)``` <br />
51
- > > > > > > ```> > Right Menu：``` <br />
52
- > > > > > > ```> > [Logout](#logout)``` <br />
53
- > > > > > > <br />
54
- > > > > > > ```__Button|Add Friend__```
55
116
  > >
56
117
  > > <!-- -->
57
118
  > >
58
- > > ##Cheat Sheet:Center Aligned
59
- > > > Equal Width Grid:
60
- > > > > Column:
61
- > > > > > Basic Segment:
62
- > > > > > ##### Button
63
- > > > > > > Info Message:
64
- > > > > > > ``` __Button|Button Text__ ```
65
- > > > > >
66
- > > > > > <!-- -->
67
- > > > > >
68
- > > > > > ##### Container
69
- > > > > > > Info Message:
70
- > > > > > > ``` > Container： ``` <br />
71
- > > > > > > ``` > ``` <br />
72
- > > > > >
73
- > > > > > <!-- -->
74
- > > > > >
75
- > > > > > ##### Icon
76
- > > > > > > Info Message:
77
- > > > > > > ``` _Icon <Name>_ ``` <br />
78
- > > > > >
79
- > > > > > <!-- -->
80
- > > > > >
81
- > > > > > ##### Segment
82
- > > > > > > Info Message:
83
- > > > > > > ``` > Segment： ``` <br />
84
- > > > > > > ``` > ``` <br />
85
- > > > > >
86
- > > > > > <!-- -->
87
- > > > > >
88
- > > > > > ##### Menu
89
- > > > > > > Info Message:
90
- > > > > > > ``` > Menu： ``` <br />
91
- > > > > > > ``` > [Menu Item] ``` <br />
92
- > > > > >
93
- > > > > > <!-- -->
94
- > > > > >
95
- > > > > > ##### List
96
- > > > > > > Info Message:
97
- > > > > > > ``` * List 1 ``` <br />
98
- > > > > > > ``` * List 2 ``` <br />
99
- > > > > >
100
- > > > > > <!-- -->
101
- > > > > >
102
- > > > > > ##### Label
103
- > > > > > > Info Message:
104
- > > > > > > ``` > Label： ``` <br />
105
- > > > > > > ``` > _Mail Icon_ 23 ``` <br />
106
- > > > > >
107
- > > > > > <!-- -->
108
- > > > > >
109
- > > >
110
- > > > <!-- -->
111
- > > >
112
- > > > > Column:
113
- > > > > > Basic Segment:
114
- > > > > > ##### Item
115
- > > > > > > Info Message:
116
- > > > > > > ``` [Item](#URL_ID "class") ``` <br />
117
- > > > > >
118
- > > > > > <!-- -->
119
- > > > > >
120
- > > > > > ##### Message
121
- > > > > > > Info Message:
122
- > > > > > > ``` __Message|Header：Message Header,Text：Message Text__ ``` <br />
123
- > > > > >
124
- > > > > > <!-- -->
125
- > > > > >
126
- > > > > > ##### Header
127
- > > > > > > Info Message:
128
- > > > > > > ``` # H1, ## H2, ### H3, #### H4 ... ``` <br />
129
- > > > > >
130
- > > > > > <!-- -->
131
- > > > > >
132
- > > > > > ##### Column / Grid / Row / Segment / Container
133
- > > > > > > Info Message:
134
- > > > > > > ``` > Grid：``` <br />
135
- > > > > > > ``` > ``` <br />
136
- > > > > > > ``` > <!-- -->``` <br />
137
- > > > > > > ``` > ``` <br />
138
- > > > > > > ``` > > Column：``` <br />
139
- > > > > > > ``` > > Column 1 ``` <br />
140
- > > > > > > ``` > ``` <br />
141
- > > > > > > ``` > <!-- -->``` <br />
142
- > > > > > > ``` > ``` <br />
143
- > > > > > > ``` > > Column：``` <br />
144
- > > > > > > ``` > > Column 2 ``` <br />
145
- > > > > >
146
- > > > > > <!-- -->
147
- > > > > >
148
- > >
149
- > > <!-- -->
150
- > >
151
- > > > Segment:
152
- > > > # Buttons:Center Aligned
153
- > >
154
- > > <!-- -->
155
- > >
156
- > > > Segment:
157
- > > > ### Button
158
- > > > "Standard Button"
159
- > >
160
- > > <!-- -->
161
- > >
162
- > > > Divided Segment Grid:
163
- > > > > HTML Top Attached Segment:
164
- > > > > > Top Attached Label:
165
- > > > > > Standard Button
166
- > > >
167
- > > > <!-- -->
168
- > > >
169
- > > > > Center Aligned Six Wide Column:
170
- > > > > ##### Preview
119
+ > > > Column:
120
+ > > > > Basic Segment:
121
+ > > > > ##### Item
122
+ > > > > > Info Message:
123
+ > > > > > ``` [Item](#URL_ID "class") ``` <br />
124
+ > > > >
125
+ > > > > <!-- -->
126
+ > > > >
127
+ > > > > ##### Message
128
+ > > > > > Info Message:
129
+ > > > > > ``` # Short-Hand ``` <br />
130
+ > > > > > ``` __Message|Header：Message Header,Text：Message Text__ ``` <br />
131
+ > > > >
132
+ > > > > <!-- -->
133
+ > > > >
134
+ > > > > > Info Message:
135
+ > > > > > ``` # Block Syntax ``` <br />
136
+ > > > > > ``` > Message： ``` <br />
137
+ > > > > > ``` > __Header|Message Header__ ``` <br />
138
+ > > > > > ``` > Message Text ``` <br />
139
+ > > > >
140
+ > > > > <!-- -->
141
+ > > > >
142
+ > > > > ##### Header
143
+ > > > > > Info Message:
144
+ > > > > > ``` # H1, ## H2, ### H3, #### H4 ... ``` <br />
145
+ > > > >
146
+ > > > > <!-- -->
147
+ > > > >
148
+ > > > > > Info Message:
149
+ > > > > > ``` # DIV tag header ``` <br />
150
+ > > > > > ``` __Header|A Div Header__ ``` <br />
151
+ > > > >
152
+ > > > > <!-- -->
153
+ > > > >
154
+ > > > > ##### Column / Grid / Row / Segment / Container
155
+ > > > > > Info Message:
156
+ > > > > > ``` > Grid：``` <br />
157
+ > > > > > ``` > ``` <br />
158
+ > > > > > ``` > <!-- -->``` <br />
159
+ > > > > > ``` > ``` <br />
160
+ > > > > > ``` > > Column：``` <br />
161
+ > > > > > ``` > > Column 1 ``` <br />
162
+ > > > > > ``` > ``` <br />
163
+ > > > > > ``` > <!-- -->``` <br />
164
+ > > > > > ``` > ``` <br />
165
+ > > > > > ``` > > Column：``` <br />
166
+ > > > > > ``` > > Column 2 ``` <br />
167
+ > > > >
168
+ > > > > <!-- -->
169
+ > > > >
170
+ >
171
+ > <!-- -->
172
+ >
173
+ > > Segment:
174
+ > > # Buttons:Center Aligned
175
+ >
176
+ > <!-- -->
177
+ >
178
+ > > Segment:
179
+ > > ### Button
180
+ > > "Standard Button"
181
+ >
182
+ > <!-- -->
183
+ >
184
+ > > Divided Segment Grid:
185
+ > > > HTML Top Attached Segment:
186
+ > > > > Top Attached Label:
187
+ > > > > Standard Button
188
+ > >
189
+ > > <!-- -->
190
+ > >
191
+ > > > Center Aligned Six Wide Column:
192
+ > > > ##### Preview
193
+ > > > __Button|Follow__
194
+ > >
195
+ > > <!-- -->
196
+ > >
197
+ > > > Left Aligned Ten Wide Column:
198
+ > > > ##### Markdown Syntax
199
+ > > > > Inverted Very Padded Segment:
200
+ > > > > ```
171
201
  > > > > __Button|Follow__
172
- > > >
173
- > > > <!-- -->
174
- > > >
175
- > > > > Left Aligned Ten Wide Column:
176
- > > > > ##### Markdown Syntax
177
- > > > > > Inverted Very Padded Segment:
178
- > > > > > ```
179
- > > > > > __Button|Follow__
180
- > > > > > ```
181
- > > >
182
- > > > <!-- -->
183
- > > >
202
+ > > > > ```
184
203
  > >
185
204
  > > <!-- -->
186
205
  > >
187
- > > > Divided Segment Grid:
188
- > > > > HTML Top Attached Segment:
189
- > > > > > Top Attached Label:
190
- > > > > > Standard Button with Custom Class And ID
191
- > > >
192
- > > > <!-- -->
193
- > > >
194
- > > > > Center Aligned Six Wide Column:
195
- > > > > ##### Preview
196
- > > > > __Follow-Button-Class Button|Follow|Fancy-Follow-Button-ID__
197
- > > >
198
- > > > <!-- -->
199
- > > >
200
- > > > > Left Aligned Ten Wide Column:
201
- > > > > ##### Markdown Syntax
202
- > > > > > Inverted Very Padded Segment:
203
- > > > > > ```__Follow-Button-Class Button|Follow|Follow-Button-ID__```
204
- > > >
205
- > > > <!-- -->
206
- > > >
206
+ >
207
+ > <!-- -->
208
+ >
209
+ > > Divided Segment Grid:
210
+ > > > HTML Top Attached Segment:
211
+ > > > > Top Attached Label:
212
+ > > > > Standard Button with Custom Class And ID
207
213
  > >
208
214
  > > <!-- -->
209
215
  > >
210
- > > > Divided Segment Grid:
211
- > > > > HTML Top Attached Segment:
212
- > > > > > Top Attached Label:
213
- > > > > > Focusable Button
214
- > > >
215
- > > > <!-- -->
216
- > > >
217
- > > > > Center Aligned Six Wide Column:
218
- > > > > ##### Preview
219
- > > > > __Focusable Button|Follow|My-Focusable-Button__
220
- > > >
221
- > > > <!-- -->
222
- > > >
223
- > > > > Left Aligned Ten Wide Column:
224
- > > > > ##### Markdown Syntax
225
- > > > > > Inverted Very Padded Segment:
226
- > > > > > ```
227
- > > > > > __Focusable Button|Follow|My-Focusable-Button__
228
- > > > > > ```
229
- > > >
230
- > > > <!-- -->
231
- > > >
216
+ > > > Center Aligned Six Wide Column:
217
+ > > > ##### Preview
218
+ > > > __Optional-Class Button|Follow|Optional-ID__
232
219
  > >
233
220
  > > <!-- -->
234
221
  > >
235
- > > > Attached Segment:
236
- > > > ### Emphasis
237
- > > > "A button can be formatted to show different levels of emphasis"
222
+ > > > Left Aligned Ten Wide Column:
223
+ > > > ##### Markdown Syntax
224
+ > > > > Inverted Very Padded Segment:
225
+ > > > > ```__<Optional-Class> Button|Follow|<Optional-ID>__```
238
226
  > >
239
227
  > > <!-- -->
240
228
  > >
241
- > > > Divided Segment Grid:
242
- > > > > HTML Top Attached Segment:
243
- > > > > > Top Attached Label:
244
- > > > > > Emphasis
245
- > > >
246
- > > > <!-- -->
247
- > > >
248
- > > > > Center Aligned Six Wide Column:
249
- > > > > ##### Preview
250
- > > > > __Primary Button|Save__ __Button|Discard__
251
- > > > > " "
252
- > > > > __Secondary Button|Save__ __Button|Discard__
253
- > > >
254
- > > > <!-- -->
255
- > > >
256
- > > > > Left Aligned Ten Wide Column:
257
- > > > > ##### Markdown Syntax
258
- > > > > > Inverted Very Padded Segment:
259
- > > > > > ```
260
- > > > > > __Primary Button|Save__
261
- > > > > > __Button|Discard__
262
- > > > > > __Secondary Button|Save__
263
- > > > > > __Button|Discard__
264
- > > > > > ```
265
- > > >
266
- > > > <!-- -->
267
- > > >
229
+ >
230
+ > <!-- -->
231
+ >
232
+ > > Divided Segment Grid:
233
+ > > > HTML Top Attached Segment:
234
+ > > > > Top Attached Label:
235
+ > > > > Focusable Button
268
236
  > >
269
237
  > > <!-- -->
270
238
  > >
271
- > > > Attached Segment:
272
- > > > ### Animated
273
- > > > "A button can animate to show hidden content"
239
+ > > > Center Aligned Six Wide Column:
240
+ > > > ##### Preview
241
+ > > > __Focusable Button|Follow|Optional-ID__
274
242
  > >
275
243
  > > <!-- -->
276
244
  > >
277
- > > > Divided Segment Grid:
278
- > > > > HTML Top Attached Segment:
279
- > > > > > Top Attached Label:
280
- > > > > > Animated
281
- > > >
282
- > > > <!-- -->
283
- > > >
284
- > > > > Center Aligned Six Wide Column:
285
- > > > > ##### Preview
286
- > > > > __Animated Button|Next;Icon:Right Arrow__
287
- > > >
288
- > > > <!-- -->
289
- > > >
290
- > > > > Left Aligned Ten Wide Column:
291
- > > > > ##### Markdown Syntax
292
- > > > > > Inverted Very Padded Segment:
293
- > > > > > ```
294
- > > > > > __Animated Button|Next;Icon：Right Arrow__
295
- > > > > > ```
296
- > > >
297
- > > > <!-- -->
298
- > > >
245
+ > > > Left Aligned Ten Wide Column:
246
+ > > > ##### Markdown Syntax
247
+ > > > > Inverted Very Padded Segment:
248
+ > > > > ```
249
+ > > > > __Focusable Button|Follow|<Optional-ID>__
250
+ > > > > ```
299
251
  > >
300
252
  > > <!-- -->
301
253
  > >
302
- > > > Divided Segment Grid:
303
- > > > > HTML Top Attached Segment:
304
- > > > > > Top Attached Label:
305
- > > > > > Vertical Animated
306
- > > >
307
- > > > <!-- -->
308
- > > >
309
- > > > > Center Aligned Six Wide Column:
310
- > > > > ##### Preview
311
- > > > > __Vertical Animated Button|Icon:Shop;Shop__
312
- > > >
313
- > > > <!-- -->
314
- > > >
315
- > > > > Left Aligned Ten Wide Column:
316
- > > > > ##### Markdown Syntax
317
- > > > > > Inverted Very Padded Segment:
318
- > > > > > ```
319
- > > > > > __Vertical Animated Button|Icon：Shop;Shop__
320
- > > > > > ```
321
- > > >
322
- > > > <!-- -->
323
- > > >
254
+ >
255
+ > <!-- -->
256
+ >
257
+ > > Attached Segment:
258
+ > > ### Emphasis
259
+ > > "A button can be formatted to show different levels of emphasis"
260
+ >
261
+ > <!-- -->
262
+ >
263
+ > > Divided Segment Grid:
264
+ > > > HTML Top Attached Segment:
265
+ > > > > Top Attached Label:
266
+ > > > > Emphasis
324
267
  > >
325
268
  > > <!-- -->
326
269
  > >
327
- > > > Divided Segment Grid:
328
- > > > > HTML Top Attached Segment:
329
- > > > > > Top Attached Label:
330
- > > > > > Fade Animated
331
- > > >
332
- > > > <!-- -->
333
- > > >
334
- > > > > Center Aligned Six Wide Column:
335
- > > > > ##### Preview
336
- > > > > __Fade Animated Button|Sign-up for a Pro account;$12.99 a month__
337
- > > >
338
- > > > <!-- -->
339
- > > >
340
- > > > > Left Aligned Ten Wide Column:
341
- > > > > ##### Markdown Syntax
342
- > > > > > Inverted Very Padded Segment:
343
- > > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
344
- > > > > > <br /> or <br />
345
- > > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
346
- > > >
347
- > > > <!-- -->
348
- > > >
270
+ > > > Center Aligned Six Wide Column:
271
+ > > > ##### Preview
272
+ > > > __Primary Button|Save__ __Button|Discard__
273
+ > > > " "
274
+ > > > __Secondary Button|Save__ __Button|Discard__
349
275
  > >
350
276
  > > <!-- -->
351
277
  > >
352
- > > > Attached Segment:
353
- > > > ### Icon
354
- > > > "A button can have only an icon"
278
+ > > > Left Aligned Ten Wide Column:
279
+ > > > ##### Markdown Syntax
280
+ > > > > Inverted Very Padded Segment:
281
+ > > > > ``` __Primary Button|Save__ __Button|Discard__ ``` <br />
282
+ > > > > ``` __Secondary Button|Save__ __Button|Discard__ ```
355
283
  > >
356
284
  > > <!-- -->
357
285
  > >
358
- > > > Divided Segment Grid:
359
- > > > > HTML Top Attached Segment:
360
- > > > > > Top Attached Label:
361
- > > > > > Icon Button
362
- > > >
363
- > > > <!-- -->
364
- > > >
365
- > > > > Center Aligned Six Wide Column:
366
- > > > > ##### Preview
367
- > > > > __Icon Button|Icon:Cloud__
368
- > > >
369
- > > > <!-- -->
370
- > > >
371
- > > > > Left Aligned Ten Wide Column:
372
- > > > > ##### Markdown Syntax
373
- > > > > > Inverted Very Padded Segment:
374
- > > > > > ```
375
- > > > > > __Icon Button|Icon：Cloud__
376
- > > > > > ```
377
- > > >
378
- > > > <!-- -->
379
- > > >
286
+ >
287
+ > <!-- -->
288
+ >
289
+ > > Attached Segment:
290
+ > > ### Animated
291
+ > > "A button can animate to show hidden content"
292
+ >
293
+ > <!-- -->
294
+ >
295
+ > > Divided Segment Grid:
296
+ > > > HTML Top Attached Segment:
297
+ > > > > Top Attached Label:
298
+ > > > > Animated
380
299
  > >
381
300
  > > <!-- -->
382
301
  > >
383
- > > > Attached Segment:
384
- > > > ### Labeled Icon
385
- > > > "A button can have an icon and a label"
302
+ > > > Center Aligned Six Wide Column:
303
+ > > > ##### Preview
304
+ > > > __Animated Button|Next;Icon:Right Arrow__
386
305
  > >
387
306
  > > <!-- -->
388
307
  > >
389
- > > > Divided Segment Grid:
390
- > > > > HTML Top Attached Segment:
391
- > > > > > Top Attached Label:
392
- > > > > > Labeled Icon
393
- > > >
394
- > > > <!-- -->
395
- > > >
396
- > > > > Center Aligned Six Wide Column:
397
- > > > > ##### Preview
398
- > > > > __Labeled Icon Button|Icon:Pause,Pause__
399
- > > >
400
- > > > <!-- -->
401
- > > >
402
- > > > > Left Aligned Ten Wide Column:
403
- > > > > ##### Markdown Syntax
404
- > > > > > Inverted Very Padded Segment:
405
- > > > > > ```
406
- > > > > > __Labeled Icon Button|Icon：Pause,Pause__
407
- > > > > > ```
408
- > > >
409
- > > > <!-- -->
410
- > > >
308
+ > > > Left Aligned Ten Wide Column:
309
+ > > > ##### Markdown Syntax
310
+ > > > > Inverted Very Padded Segment:
311
+ > > > > ```
312
+ > > > > __Animated Button|Next;Icon：Right Arrow__
313
+ > > > > ```
411
314
  > >
412
315
  > > <!-- -->
413
316
  > >
414
- > > > Attached Segment:
415
- > > > ### Basic Button
416
- > > > "A basic button is less pronounced"
317
+ >
318
+ > <!-- -->
319
+ >
320
+ > > Divided Segment Grid:
321
+ > > > HTML Top Attached Segment:
322
+ > > > > Top Attached Label:
323
+ > > > > Vertical Animated
417
324
  > >
418
325
  > > <!-- -->
419
326
  > >
420
- > > > Divided Segment Grid:
421
- > > > > HTML Top Attached Segment:
422
- > > > > > Top Attached Label:
423
- > > > > > Basic Button
424
- > > >
425
- > > > <!-- -->
426
- > > >
427
- > > > > Center Aligned Six Wide Column:
428
- > > > > ##### Preview
429
- > > > > __Basic Button|Icon:User,Add Friend__
430
- > > >
431
- > > > <!-- -->
432
- > > >
433
- > > > > Left Aligned Ten Wide Column:
434
- > > > > ##### Markdown Syntax
435
- > > > > > Inverted Very Padded Segment:
436
- > > > > > ```
437
- > > > > > __Basic Button|Icon：User,Add Friend__
438
- > > > > > ```
439
- > > >
440
- > > > <!-- -->
441
- > > >
327
+ > > > Center Aligned Six Wide Column:
328
+ > > > ##### Preview
329
+ > > > __Vertical Animated Button|Icon:Shop;Shop__
442
330
  > >
443
331
  > > <!-- -->
444
332
  > >
445
- > > > Divided Segment Grid:
446
- > > > > HTML Top Attached Segment:
447
- > > > > > Top Attached Label:
448
- > > > > > Basic Button
449
- > > >
450
- > > > <!-- -->
451
- > > >
452
- > > > > Center Aligned Six Wide Column:
453
- > > > > ##### Preview
454
- > > > > __Basic Black Button|Black__
455
- > > > > __Basic Yellow Button|Yellow__
456
- > > > > __Basic Green Button|Green__
457
- > > > > __Basic Blue Button|Blue__
458
- > > > > __Basic Orange Button|Orange__
459
- > > > > __Basic Purple Button|Purple__
460
- > > > > __Basic Pink Button|Pink__
461
- > > > > __Basic Red Button|Red__
462
- > > > > __Basic Teal Button|Teal__
463
- > > >
464
- > > > <!-- -->
465
- > > >
466
- > > > > Left Aligned Ten Wide Column:
467
- > > > > ##### Markdown Syntax
468
- > > > > > Inverted Very Padded Segment:
469
- > > > > > ```
470
- > > > > __Basic Black Button|Black__
471
- > > > > __Basic Yellow Button|Yellow__
472
- > > > > __Basic Green Button|Green__
473
- > > > > __Basic Blue Button|Blue__
474
- > > > > __Basic Orange Button|Orange__
475
- > > > > __Basic Purple Button|Purple__
476
- > > > > __Basic Pink Button|Pink__
477
- > > > > __Basic Red Button|Red__
478
- > > > > __Basic Teal Button|Teal__
333
+ > > > Left Aligned Ten Wide Column:
334
+ > > > ##### Markdown Syntax
335
+ > > > > Inverted Very Padded Segment:
336
+ > > > > ```
337
+ > > > > __Vertical Animated Button|Icon：Shop;Shop__
479
338
  > > > > ```
480
- > > >
481
- > > > <!-- -->
482
- > > >
483
339
  > >
484
340
  > > <!-- -->
485
341
  > >
486
- > > > Attached Segment:
487
- > > > ### Inverted
488
- > > > "A button can be formatted to appear on dark backgrounds"
342
+ >
343
+ > <!-- -->
344
+ >
345
+ > > Divided Segment Grid:
346
+ > > > HTML Top Attached Segment:
347
+ > > > > Top Attached Label:
348
+ > > > > Fade Animated
489
349
  > >
490
350
  > > <!-- -->
491
351
  > >
492
- > > > Divided Segment Grid:
493
- > > > > HTML Top Attached Segment:
494
- > > > > > Top Attached Label:
495
- > > > > > Inverted
496
- > > >
497
- > > > <!-- -->
498
- > > >
499
- > > > > Center Aligned Six Wide Column:
500
- > > > > ##### Preview
501
- > > > > > Inverted Very Padded Segment:
502
- > > > > __Inverted Standard Button|Standard__
503
- > > > > __Inverted Black Button|Black__
504
- > > > > __Inverted Yellow Button|Yellow__
505
- > > > > __Inverted Green Button|Green__
506
- > > > > __Inverted Blue Button|Blue__
507
- > > > > __Inverted Orange Button|Orange__
508
- > > > > __Inverted Purple Button|Purple__
509
- > > > > __Inverted Pink Button|Pink__
510
- > > > > __Inverted Red Button|Red__
511
- > > > > __Inverted Teal Button|Teal__
512
- > > >
513
- > > > <!-- -->
514
- > > >
515
- > > > > Left Aligned Ten Wide Column:
516
- > > > > ##### Markdown Syntax
517
- > > > > > Inverted Very Padded Segment:
518
- > > > > > ```> Inverted Segment：``` <br />
519
- > > > > > ```> __Inverted Standard Button|Standard__``` <br />
520
- > > > > > ```> __Inverted Black Button|Black__``` <br />
521
- > > > > > ```> __Inverted Yellow Button|Yellow__``` <br />
522
- > > > > > ```> __Inverted Green Button|Green__``` <br />
523
- > > > > > ```> __Inverted Blue Button|Blue__``` <br />
524
- > > > > > ```> __Inverted Orange Button|Orange__``` <br />
525
- > > > > > ```> __Inverted Purple Button|Purple__``` <br />
526
- > > > > > ```> __Inverted Pink Button|Pink__``` <br />
527
- > > > > > ```> __Inverted Red Button|Red__``` <br />
528
- > > > > > ```> __Inverted Teal Button|Teal__```
529
- > > >
530
- > > > <!-- -->
531
- > > >
352
+ > > > Center Aligned Six Wide Column:
353
+ > > > ##### Preview
354
+ > > > __Fade Animated Button|Sign-up for a Pro account;$12.99 a month__
532
355
  > >
533
356
  > > <!-- -->
534
357
  > >
535
- > > > Attached Segment:
536
- > > > ### Groups
537
- > > > "Buttons can exist together as a group"
358
+ > > > Left Aligned Ten Wide Column:
359
+ > > > ##### Markdown Syntax
360
+ > > > > Inverted Very Padded Segment:
361
+ > > > > ```__Fade Animated Button|Sign-up for a Pro account;$12.99 a month__```
538
362
  > >
539
363
  > > <!-- -->
540
364
  > >
541
- > > > Divided Segment Grid:
542
- > > > > HTML Top Attached Segment:
543
- > > > > > Top Attached Label:
544
- > > > > > Buttons
545
- > > >
546
- > > > <!-- -->
547
- > > >
548
- > > > > Center Aligned Six Wide Column:
549
- > > > > ##### Preview
550
- > > > > > Buttons:
551
- > > > > > __Button|One|Standard__
552
- > > > > > __Button|Two|Standard__
553
- > > > > > __Button|Three|Standard__
554
- > > >
555
- > > > <!-- -->
556
- > > >
557
- > > > > Left Aligned Ten Wide Column:
558
- > > > > ##### Markdown Syntax
559
- > > > > > Inverted Very Padded Segment:
560
- > > > > > ```> Buttons：``` <br />
561
- > > > > > ```> __Standard Button|One__``` <br />
562
- > > > > > ```> __Standard Button|Two__``` <br />
563
- > > > > > ```> __Standard Button|Three__```
564
- > > >
565
- > > > <!-- -->
566
- > > >
365
+ >
366
+ > <!-- -->
367
+ >
368
+ > > Attached Segment:
369
+ > > ### Icon
370
+ > > "A button can have only an icon"
371
+ >
372
+ > <!-- -->
373
+ >
374
+ > > Divided Segment Grid:
375
+ > > > HTML Top Attached Segment:
376
+ > > > > Top Attached Label:
377
+ > > > > Icon Button
567
378
  > >
568
379
  > > <!-- -->
569
380
  > >
570
- > > > Attached Segment:
571
- > > > ### Icon Buttons
572
- > > > "Buttons can exist together as a group"
381
+ > > > Center Aligned Six Wide Column:
382
+ > > > ##### Preview
383
+ > > > __Icon Button|Icon:Cloud__
573
384
  > >
574
385
  > > <!-- -->
575
386
  > >
576
- > > > Divided Segment Grid:
577
- > > > > HTML Top Attached Segment:
578
- > > > > > Top Attached Label:
579
- > > > > > Buttons
580
- > > >
581
- > > > <!-- -->
582
- > > >
583
- > > > > Center Aligned Six Wide Column:
584
- > > > > ##### Preview
585
- > > > > > Icon Buttons:
586
- > > > > > __Button|Icon: Align Left__
587
- > > > > > __Button|Icon: Align Center__
588
- > > > > > __Button|Icon: Align Right__
589
- > > > > > __Button|Icon: Align Justify__
590
- > > > >
591
- > > > > <!-- -->
592
- > > > >
593
- > > > > > Icon Buttons:
594
- > > > > > __Button|Icon: Bold__
595
- > > > > > __Button|Icon: Underline__
596
- > > > > > __Button|Icon: Text Width__
597
- > > >
598
- > > > <!-- -->
599
- > > >
600
- > > > > Left Aligned Ten Wide Column:
601
- > > > > ##### Markdown Syntax
602
- > > > > > Inverted Very Padded Segment:
603
- > > > > > ```> Icon Buttons：``` <br />
604
- > > > > > ```> __Button|Icon：Align Left__``` <br />
605
- > > > > > ```> __Button|Icon：Align Center__``` <br />
606
- > > > > > ```> __Button|Icon：Align Right__``` <br />
607
- > > > > > ```> __Button|Icon：Align Justify__``` <br />
608
- > > > > <br />
609
- > > > > ``` <!-- A separator is required in between two spaces -->``` <br />
610
- > > > > <br />
611
- > > > > > ```> Icon Buttons：``` <br />
612
- > > > > > ```> __Button|Icon：Bold__``` <br />
613
- > > > > > ```> __Button|Icon：Underline__``` <br />
614
- > > > > > ```> __Button|Icon：Text Width__```
615
- > > >
616
- > > > <!-- -->
617
- > > >
387
+ > > > Left Aligned Ten Wide Column:
388
+ > > > ##### Markdown Syntax
389
+ > > > > Inverted Very Padded Segment:
390
+ > > > > ```
391
+ > > > > __Icon Button|Icon：Cloud__
392
+ > > > > ```
618
393
  > >
619
394
  > > <!-- -->
620
395
  > >
621
- > > > Attached Segment:
622
- > > > ### Conditionals
623
- > > > "Button groups can contain conditionals"
396
+ >
397
+ > <!-- -->
398
+ >
399
+ > > Attached Segment:
400
+ > > ### Labeled Icon
401
+ > > "A button can have an icon and a label"
402
+ >
403
+ > <!-- -->
404
+ >
405
+ > > Divided Segment Grid:
406
+ > > > HTML Top Attached Segment:
407
+ > > > > Top Attached Label:
408
+ > > > > Labeled Icon
624
409
  > >
625
410
  > > <!-- -->
626
411
  > >
627
- > > > Divided Segment Grid:
628
- > > > > HTML Top Attached Segment:
629
- > > > > > Top Attached Label:
630
- > > > > > Conditionals
631
- > > >
632
- > > > <!-- -->
633
- > > >
634
- > > > > Center Aligned Six Wide Column:
635
- > > > > ##### Preview
636
- > > > > > Buttons:
637
- > > > > > __Button|Cancel__
638
- > > > > > __Div Tag||Or__
639
- > > > > > __Positive Button|Save__
640
- > > >
641
- > > > <!-- -->
642
- > > >
643
- > > > > Left Aligned Ten Wide Column:
644
- > > > > ##### Markdown Syntax
645
- > > > > > Inverted Very Padded Segment:
646
- > > > > > ```> Buttons：``` <br />
647
- > > > > > ```> __Button|Cancel__``` <br />
648
- > > > > > ```> __Div Tag||Or__``` <br />
649
- > > > > > ```> __Positive Button|Save__```
650
- > > >
651
- > > > <!-- -->
652
- > > >
653
- > > > > Center Aligned Six Wide Column:
654
- > > > > ##### Preview
655
- > > > > > Buttons:
656
- > > > > > __Button|un__
657
- > > > > > __Div Tag||Or|Data:Text:ou__
658
- > > > > > __Positive Button|deux|Positive-ID__
412
+ > > > Center Aligned Six Wide Column:
413
+ > > > ##### Preview
414
+ > > > __Labeled Icon Button|Icon:Pause,Pause__
415
+ > >
416
+ > > <!-- -->
417
+ > >
418
+ > > > Left Aligned Ten Wide Column:
419
+ > > > ##### Markdown Syntax
420
+ > > > > Inverted Very Padded Segment:
421
+ > > > > ```
422
+ > > > > __Labeled Icon Button|Icon：Pause,Pause__
423
+ > > > > ```
424
+ > >
425
+ > > <!-- -->
426
+ > >
427
+ >
428
+ > <!-- -->
429
+ >
430
+ > > Attached Segment:
431
+ > > ### Basic Button
432
+ > > "A basic button is less pronounced"
433
+ >
434
+ > <!-- -->
435
+ >
436
+ > > Divided Segment Grid:
437
+ > > > HTML Top Attached Segment:
438
+ > > > > Top Attached Label:
439
+ > > > > Basic Button
440
+ > >
441
+ > > <!-- -->
442
+ > >
443
+ > > > Center Aligned Six Wide Column:
444
+ > > > ##### Preview
445
+ > > > __Basic Button|Icon:User,Add Friend__
446
+ > >
447
+ > > <!-- -->
448
+ > >
449
+ > > > Left Aligned Ten Wide Column:
450
+ > > > ##### Markdown Syntax
451
+ > > > > Inverted Very Padded Segment:
452
+ > > > > ```
453
+ > > > > __Basic Button|Icon：User,Add Friend__
454
+ > > > > ```
455
+ > >
456
+ > > <!-- -->
457
+ > >
458
+ >
459
+ > <!-- -->
460
+ >
461
+ > > Divided Segment Grid:
462
+ > > > HTML Top Attached Segment:
463
+ > > > > Top Attached Label:
464
+ > > > > Basic Button
465
+ > >
466
+ > > <!-- -->
467
+ > >
468
+ > > > Center Aligned Six Wide Column:
469
+ > > > ##### Preview
470
+ > > > __Basic Standard Button|Standard__
471
+ > > > __Basic Black Button|Black__
472
+ > > > __Basic Yellow Button|Yellow__
473
+ > > > __Basic Green Button|Green__
474
+ > > > __Basic Blue Button|Blue__
475
+ > > > __Basic Orange Button|Orange__
476
+ > > > __Basic Purple Button|Purple__
477
+ > > > __Basic Pink Button|Pink__
478
+ > > > __Basic Red Button|Red__
479
+ > > > __Basic Teal Button|Teal__
480
+ > >
481
+ > > <!-- -->
482
+ > >
483
+ > > > Left Aligned Ten Wide Column:
484
+ > > > ##### Markdown Syntax
485
+ > > > > Inverted Very Padded Segment:
486
+ > > > > ``` __Basic Standard Button|Standard__``` <br />
487
+ > > > > ``` __Basic Black Button|Black__``` <br />
488
+ > > > > ``` __Basic Yellow Button|Yellow__``` <br />
489
+ > > > > ``` __Basic Green Button|Green__``` <br />
490
+ > > > > ``` __Basic Blue Button|Blue__``` <br />
491
+ > > > > ``` __Basic Orange Button|Orange__``` <br />
492
+ > > > > ``` __Basic Purple Button|Purple__``` <br />
493
+ > > > > ``` __Basic Pink Button|Pink__``` <br />
494
+ > > > > ``` __Basic Red Button|Red__``` <br />
495
+ > > > > ``` __Basic Teal Button|Teal__```
496
+ > >
497
+ > > <!-- -->
498
+ > >
499
+ >
500
+ > <!-- -->
501
+ >
502
+ > > Attached Segment:
503
+ > > ### Inverted
504
+ > > "A button can be formatted to appear on dark backgrounds"
505
+ >
506
+ > <!-- -->
507
+ >
508
+ > > Divided Segment Grid:
509
+ > > > HTML Top Attached Segment:
510
+ > > > > Top Attached Label:
511
+ > > > > Inverted
512
+ > >
513
+ > > <!-- -->
514
+ > >
515
+ > > > Center Aligned Six Wide Column:
516
+ > > > ##### Preview
517
+ > > > > Inverted Very Padded Segment:
518
+ > > > __Inverted Standard Button|Standard__
519
+ > > > __Inverted Black Button|Black__
520
+ > > > __Inverted Yellow Button|Yellow__
521
+ > > > __Inverted Green Button|Green__
522
+ > > > __Inverted Blue Button|Blue__
523
+ > > > __Inverted Orange Button|Orange__
524
+ > > > __Inverted Purple Button|Purple__
525
+ > > > __Inverted Pink Button|Pink__
526
+ > > > __Inverted Red Button|Red__
527
+ > > > __Inverted Teal Button|Teal__
528
+ > >
529
+ > > <!-- -->
530
+ > >
531
+ > > > Left Aligned Ten Wide Column:
532
+ > > > ##### Markdown Syntax
533
+ > > > > Inverted Very Padded Segment:
534
+ > > > > ```> Inverted Segment：``` <br />
535
+ > > > > ```> __Inverted Standard Button|Standard__``` <br />
536
+ > > > > ```> __Inverted Black Button|Black__``` <br />
537
+ > > > > ```> __Inverted Yellow Button|Yellow__``` <br />
538
+ > > > > ```> __Inverted Green Button|Green__``` <br />
539
+ > > > > ```> __Inverted Blue Button|Blue__``` <br />
540
+ > > > > ```> __Inverted Orange Button|Orange__``` <br />
541
+ > > > > ```> __Inverted Purple Button|Purple__``` <br />
542
+ > > > > ```> __Inverted Pink Button|Pink__``` <br />
543
+ > > > > ```> __Inverted Red Button|Red__``` <br />
544
+ > > > > ```> __Inverted Teal Button|Teal__```
545
+ > >
546
+ > > <!-- -->
547
+ > >
548
+ >
549
+ > <!-- -->
550
+ >
551
+ > > Attached Segment:
552
+ > > ### Groups
553
+ > > "Buttons can exist together as a group"
554
+ >
555
+ > <!-- -->
556
+ >
557
+ > > Divided Segment Grid:
558
+ > > > HTML Top Attached Segment:
559
+ > > > > Top Attached Label:
560
+ > > > > Buttons
561
+ > >
562
+ > > <!-- -->
563
+ > >
564
+ > > > Center Aligned Six Wide Column:
565
+ > > > ##### Preview
566
+ > > > > Buttons:
567
+ > > > > __Button|One|Standard__
568
+ > > > > __Button|Two|Standard__
569
+ > > > > __Button|Three|Standard__
570
+ > >
571
+ > > <!-- -->
572
+ > >
573
+ > > > Left Aligned Ten Wide Column:
574
+ > > > ##### Markdown Syntax
575
+ > > > > Inverted Very Padded Segment:
576
+ > > > > ```> Buttons：``` <br />
577
+ > > > > ```> __Standard Button|One__``` <br />
578
+ > > > > ```> __Standard Button|Two__``` <br />
579
+ > > > > ```> __Standard Button|Three__```
580
+ > >
581
+ > > <!-- -->
582
+ > >
583
+ >
584
+ > <!-- -->
585
+ >
586
+ > > Attached Segment:
587
+ > > ### Icon Buttons
588
+ > > "Buttons can exist together as a group"
589
+ >
590
+ > <!-- -->
591
+ >
592
+ > > Divided Segment Grid:
593
+ > > > HTML Top Attached Segment:
594
+ > > > > Top Attached Label:
595
+ > > > > Buttons
596
+ > >
597
+ > > <!-- -->
598
+ > >
599
+ > > > Center Aligned Six Wide Column:
600
+ > > > ##### Preview
601
+ > > > > Icon Buttons:
602
+ > > > > __Button|Icon: Align Left__
603
+ > > > > __Button|Icon: Align Center__
604
+ > > > > __Button|Icon: Align Right__
605
+ > > > > __Button|Icon: Align Justify__
659
606
  > > >
660
607
  > > > <!-- -->
661
608
  > > >
662
- > > > > Left Aligned Ten Wide Column:
663
- > > > > ##### Markdown Syntax
664
- > > > > > Inverted Very Padded Segment:
665
- > > > > > ```> Buttons：``` <br />
666
- > > > > > ```> __Button|un__``` <br />
667
- > > > > > ```> __Div Tag|Or|Data：Text：ou__``` <br />
668
- > > > > > ```> __Positive Button|deux|Positive-ID__```
669
- > > >
670
- > > > <!-- -->
671
- > > >
609
+ > > > > Icon Buttons:
610
+ > > > > __Button|Icon: Bold__
611
+ > > > > __Button|Icon: Underline__
612
+ > > > > __Button|Icon: Text Width__
613
+ > >
614
+ > > <!-- -->
615
+ > >
616
+ > > > Left Aligned Ten Wide Column:
617
+ > > > ##### Markdown Syntax
618
+ > > > > Inverted Very Padded Segment:
619
+ > > > > ```> Icon Buttons：``` <br />
620
+ > > > > ```> __Button|Icon：Align Left__``` <br />
621
+ > > > > ```> __Button|Icon：Align Center__``` <br />
622
+ > > > > ```> __Button|Icon：Align Right__``` <br />
623
+ > > > > ```> __Button|Icon：Align Justify__``` <br />
624
+ > > > <br />
625
+ > > > ``` <!-- A separator is required in between two spaces -->``` <br />
626
+ > > > <br />
627
+ > > > > ```> Icon Buttons：``` <br />
628
+ > > > > ```> __Button|Icon：Bold__``` <br />
629
+ > > > > ```> __Button|Icon：Underline__``` <br />
630
+ > > > > ```> __Button|Icon：Text Width__```
631
+ > >
632
+ > > <!-- -->
633
+ > >
634
+ >
635
+ > <!-- -->
636
+ >
637
+ > > Attached Segment:
638
+ > > ### Conditionals
639
+ > > "Button groups can contain conditionals"
640
+ >
641
+ > <!-- -->
642
+ >
643
+ > > Divided Segment Grid:
644
+ > > > HTML Top Attached Segment:
645
+ > > > > Top Attached Label:
646
+ > > > > Conditionals
647
+ > >
648
+ > > <!-- -->
649
+ > >
650
+ > > > Center Aligned Six Wide Column:
651
+ > > > ##### Preview
652
+ > > > > Buttons:
653
+ > > > > __Button|Cancel__
654
+ > > > > __Div Tag||Or__
655
+ > > > > __Positive Button|Save__
656
+ > >
657
+ > > <!-- -->
658
+ > >
659
+ > > > Left Aligned Ten Wide Column:
660
+ > > > ##### Markdown Syntax
661
+ > > > > Inverted Very Padded Segment:
662
+ > > > > ```> Buttons：``` <br />
663
+ > > > > ```> __Button|Cancel__``` <br />
664
+ > > > > ```> __Div Tag||Or__``` <br />
665
+ > > > > ```> __Positive Button|Save__```
666
+ > >
667
+ > > <!-- -->
668
+ > >
669
+ > > > Center Aligned Six Wide Column:
670
+ > > > ##### Preview
671
+ > > > > Buttons:
672
+ > > > > __Button|un__
673
+ > > > > __Div Tag||Or|Data:Text:ou__
674
+ > > > > __Positive Button|deux|Optional-ID__
675
+ > >
676
+ > > <!-- -->
677
+ > >
678
+ > > > Left Aligned Ten Wide Column:
679
+ > > > ##### Markdown Syntax
680
+ > > > > Inverted Very Padded Segment:
681
+ > > > > ```> Buttons：``` <br />
682
+ > > > > ```> __Button|un__``` <br />
683
+ > > > > ```> __Div Tag||Or|Data：Text：ou__``` <br />
684
+ > > > > ```> __Positive Button|deux|<Optional-ID>__```
685
+ > >
686
+ > > <!-- -->
687
+ > >