markdown-ui 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
+ > >