source: main/waeup-hugo/themes/dimension/exampleSite/content/elements.md @ 16161

Last change on this file since 16161 was 14926, checked in by Henrik Bettermann, 7 years ago
File size: 6.9 KB
Line 
1+++
2title = "Elements"
3weight = 50
4draft = true
5+++
6
7<h3 class="major">Hugo shortcodes in theme</h3>
8
9<code>{&zwnj;{< socialLinks >}}</code> will get into {{< socialLinks >}} configured in <code>config.toml</code>.
10
11<code>{&zwnj;{< gmaps pb="\<sharecode\>" >}}</code> will get a google map
12{{< gmaps pb="!1m18!1m12!1m3!1d86456.59681285016!2d8.466675323953403!3d47.377433669132884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47900b9749bea219%3A0xe66e8df1e71fdc03!2zWsO8cmljaA!5e0!3m2!1sde!2sch!4v1488248947910" >}}
13
14To get the pb parameter value, search the desired place on google maps and click the share button and copy/paste the pb parameter out of the iframe code.
15
16<h3 class="major">Text</h3>
17
18This is **bold** and this is __strong__. This is *italic* and this is _emphasized_.
19This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
20This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>.
21Finally, [this is a link to a markdown cheatsheet](https://beegit.com/markdown-cheat-sheet).
22
23> Not all markdown syntax is allowed but you can mix most html tags into the markdown text.
24
25---
26## Heading Level 2
27### Heading Level 3
28#### Heading Level 4
29##### Heading Level 5
30###### Heading Level 6
31---
32
33#### Blockquote
34> Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
35
36#### Preformatted
37
38    i = 0;
39
40    while (!deck.isInOrder()) {
41        print 'Iteration ' + i;
42        deck.shuffle();
43        i++;
44    }
45
46    print 'It took ' + i + ' iterations to sort the deck.';
47
48<h3 class="major">Lists</h3>
49
50#### Unordered
51* Dolor pulvinar etiam.
52* Sagittis adipiscing.
53* Felis enim feugiat.
54
55#### Ordered
561. Dolor pulvinar etiam.
572. Etiam vel felis viverra.
583. Felis enim feugiat.
594. Dolor pulvinar etiam.
605. Etiam vel felis lorem.
616. Felis enim et feugiat.
62
63#### Icons
64<ul class="icons">
65        <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
66        <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
67        <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
68        <li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
69</ul>
70
71
72#### Actions
73<ul class="actions">
74        <li><a href="#" class="button special">Default</a></li>
75        <li><a href="#" class="button">Default</a></li>
76</ul>
77<ul class="actions vertical">
78        <li><a href="#" class="button special">Default</a></li>
79        <li><a href="#" class="button">Default</a></li>
80</ul>
81                                                               
82<h3 class="major">Table</h3>
83#### Default
84
85| Tables        | Are           | Cool  |
86| ------------- |:-------------:| -----:|
87| col 3 is      | right-aligned | $1600 |
88| col 2 is      | centered      |   $12 |
89| zebra stripes | are neat      |    $1 |
90
91<div class="table-wrapper">
92        <table>
93                <thead>
94                        <tr>
95                                <th>Name</th>
96                                <th>Description</th>
97                                <th>Price</th>
98                        </tr>
99                </thead>
100                <tbody>
101                        <tr>
102                                <td>Item One</td>
103                                <td>Ante turpis integer aliquet porttitor.</td>
104                                <td>29.99</td>
105                        </tr>
106                        <tr>
107                                <td>Item Two</td>
108                                <td>Vis ac commodo adipiscing arcu aliquet.</td>
109                                <td>19.99</td>
110                        </tr>
111                        <tr>
112                                <td>Item Three</td>
113                                <td> Morbi faucibus arcu accumsan lorem.</td>
114                                <td>29.99</td>
115                        </tr>
116                        <tr>
117                                <td>Item Four</td>
118                                <td>Vitae integer tempus condimentum.</td>
119                                <td>19.99</td>
120                        </tr>
121                        <tr>
122                                <td>Item Five</td>
123                                <td>Ante turpis integer aliquet porttitor.</td>
124                                <td>29.99</td>
125                        </tr>
126                </tbody>
127                <tfoot>
128                        <tr>
129                                <td colspan="2"></td>
130                                <td>100.00</td>
131                        </tr>
132                </tfoot>
133        </table>
134</div>
135
136<h4>Alternate</h4>
137<div class="table-wrapper">
138        <table class="alt">
139                <thead>
140                        <tr>
141                                <th>Name</th>
142                                <th>Description</th>
143                                <th>Price</th>
144                        </tr>
145                </thead>
146                <tbody>
147                        <tr>
148                                <td>Item One</td>
149                                <td>Ante turpis integer aliquet porttitor.</td>
150                                <td>29.99</td>
151                        </tr>
152                        <tr>
153                                <td>Item Two</td>
154                                <td>Vis ac commodo adipiscing arcu aliquet.</td>
155                                <td>19.99</td>
156                        </tr>
157                        <tr>
158                                <td>Item Three</td>
159                                <td> Morbi faucibus arcu accumsan lorem.</td>
160                                <td>29.99</td>
161                        </tr>
162                        <tr>
163                                <td>Item Four</td>
164                                <td>Vitae integer tempus condimentum.</td>
165                                <td>19.99</td>
166                        </tr>
167                        <tr>
168                                <td>Item Five</td>
169                                <td>Ante turpis integer aliquet porttitor.</td>
170                                <td>29.99</td>
171                        </tr>
172                </tbody>
173                <tfoot>
174                        <tr>
175                                <td colspan="2"></td>
176                                <td>100.00</td>
177                        </tr>
178                </tfoot>
179        </table>
180</div>
181                                                               
182
183                                                               
184<h3 class="major">Buttons</h3>
185<ul class="actions">
186        <li><a href="#" class="button special">Special</a></li>
187        <li><a href="#" class="button">Default</a></li>
188</ul>
189<ul class="actions">
190        <li><a href="#" class="button">Default</a></li>
191        <li><a href="#" class="button small">Small</a></li>
192</ul>
193<ul class="actions">
194        <li><a href="#" class="button special icon fa-download">Icon</a></li>
195        <li><a href="#" class="button icon fa-download">Icon</a></li>
196</ul>
197<ul class="actions">
198        <li><span class="button special disabled">Disabled</span></li>
199        <li><span class="button disabled">Disabled</span></li>
200</ul>
201                                                               
202
203                                                               
204<h3 class="major">Form</h3>
205<form method="post" action="#">
206        <div class="field half first">
207                <label for="demo-name">Name</label>
208                <input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
209        </div>
210        <div class="field half">
211                <label for="demo-email">Email</label>
212                <input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
213        </div>
214        <div class="field">
215                <label for="demo-category">Category</label>
216                <div class="select-wrapper">
217                        <select name="demo-category" id="demo-category">
218                                <option value="">-</option>
219                                <option value="1">Manufacturing</option>
220                                <option value="1">Shipping</option>
221                                <option value="1">Administration</option>
222                                <option value="1">Human Resources</option>
223                        </select>
224                </div>
225        </div>
226        <div class="field half first">
227                <input type="radio" id="demo-priority-low" name="demo-priority" checked>
228                <label for="demo-priority-low">Low</label>
229        </div>
230        <div class="field half">
231                <input type="radio" id="demo-priority-high" name="demo-priority">
232                <label for="demo-priority-high">High</label>
233        </div>
234        <div class="field half first">
235                <input type="checkbox" id="demo-copy" name="demo-copy">
236                <label for="demo-copy">Email me a copy</label>
237        </div>
238        <div class="field half">
239                <input type="checkbox" id="demo-human" name="demo-human" checked>
240                <label for="demo-human">Not a robot</label>
241        </div>
242        <div class="field">
243                <label for="demo-message">Message</label>
244                <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
245        </div>
246        <ul class="actions">
247                <li><input type="submit" value="Send Message" class="special" /></li>
248                <li><input type="reset" value="Reset" /></li>
249        </ul>
250</form>
251                                                               
Note: See TracBrowser for help on using the repository browser.