source: spip-zone/_plugins_/foundation_6/trunk/content/foundation-test.html @ 93808

Last change on this file since 93808 was 93808, checked in by p@…, 5 years ago

Page de test pour foundation 6

On supprime les anciennes

File size: 27.9 KB
Line 
1
2<h1 class="docs-page-title">Kitchen Sink</h1>
3
4
5<p class="lead docs-page-lead">Everything but.</p>
6
7<hr>
8
9<div class="row">
10
11  <div class="large-9 columns" id="docs">
12
13        <h2 id="accordion" class="docs-heading" data-magellan-target="accordion"><a class="docs-heading-icon" href="#accordion"></a>Accordion</h2><div class="docs-code" data-docs-code></div>
14
15          <div class="docs-code-live"><ul class="accordion" data-accordion role="tablist">
16                <li class="accordion-item is-active">
17                  <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
18                  <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
19                  <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
20                  <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
21                        Panel 1. Lorem ipsum dolor
22                  </div>
23                </li>
24                <li class="accordion-item">
25                  <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
26                  <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
27                  <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
28                  <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
29                        Panel 2. Lorem ipsum dolor
30                  </div>
31                </li>
32                <li class="accordion-item">
33                  <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
34                  <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
35                  <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
36                  <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
37                        Panel 3. Lorem ipsum dolor
38                  </div>
39                </li>
40          </ul></div><hr>
41          <h2 id="accordion-menu" class="docs-heading" data-magellan-target="accordion-menu"><a class="docs-heading-icon" href="#accordion-menu"></a>Accordion Menu</h2><div class="docs-code" data-docs-code></div>
42
43                <div class="docs-code-live"><ul class="vertical menu" data-accordion-menu>
44                  <li>
45                        <a href="#">Item 1</a>
46                        <ul class="menu vertical nested is-active">
47                          <li>
48                                <a href="#">Item 1A</a>
49                                <ul class="menu vertical nested">
50                                  <li><a href="#">Item 1Ai</a></li>
51                                  <li><a href="#">Item 1Aii</a></li>
52                                  <li><a href="#">Item 1Aiii</a></li>
53                                </ul>
54                          </li>
55                          <li><a href="#">Item 1B</a></li>
56                          <li><a href="#">Item 1C</a></li>
57                        </ul>
58                  </li>
59                  <li>
60                        <a href="#">Item 2</a>
61                        <ul class="menu vertical nested">
62                          <li><a href="#">Item 2A</a></li>
63                          <li><a href="#">Item 2B</a></li>
64                        </ul>
65                  </li>
66                  <li><a href="#">Item 3</a></li>
67                </ul></div><hr>
68                <h2 id="badge" class="docs-heading" data-magellan-target="badge"><a class="docs-heading-icon" href="#badge"></a>Badge</h2><div class="docs-code" data-docs-code></div>
69
70                  <div class="docs-code-live"><span class="secondary badge">2</span>
71                        <span class="success badge">3</span>
72                        <span class="alert badge">A</span>
73                        <span class="warning badge">B</span></div><hr>
74                        <h2 id="breadcrumbs" class="docs-heading" data-magellan-target="breadcrumbs"><a class="docs-heading-icon" href="#breadcrumbs"></a>Breadcrumbs</h2><div class="docs-code" data-docs-code></div>
75
76                          <div class="docs-code-live"><nav aria-label="You are here:" role="navigation">
77                                <ul class="breadcrumbs">
78                                  <li><a href="#">Home</a></li>
79                                  <li><a href="#">Features</a></li>
80                                  <li class="disabled">Gene Splicing</li>
81                                  <li>
82                                        <span class="show-for-sr">Current: </span> Cloning
83                                  </li>
84                                </ul>
85                          </nav></div><hr>
86                          <h2 id="button" class="docs-heading" data-magellan-target="button"><a class="docs-heading-icon" href="#button"></a>Button</h2><div class="docs-code" data-docs-code></div>
87
88                                <div class="docs-code-live"><!-- Anchors (links) -->
89                                  <a href="about.html" class="button">Learn More</a>
90                                  <a href="#features" class="button">View All Features</a>
91
92                                  <!-- Buttons (actions) -->
93                                  <button type="button" class="success button">Save</button>
94                                  <button type="button" class="alert button">Delete</button>
95
96                                  <a class="tiny button" href="#">So Tiny</a>
97                                  <a class="small button" href="#">So Small</a>
98                                  <a class="large button" href="#">So Large</a>
99                                  <a class="expanded button" href="#">Such Expand</a>
100
101                                  <div class="button-group">
102                                        <a class="button">One</a>
103                                        <a class="button">Two</a>
104                                        <a class="button">Three</a>
105                                  </div></div><hr>
106                                  <h2 id="callout" class="docs-heading" data-magellan-target="callout"><a class="docs-heading-icon" href="#callout"></a>Callout</h2><div class="docs-code" data-docs-code></div>
107
108                                        <div class="docs-code-live"><div class="callout">
109                                          <h5>This is a callout.</h5>
110                                          <p>It has an easy to override visual style, and is appropriately subdued.</p>
111                                          <a href="#">It's dangerous to go alone, take this.</a>
112                                        </div>
113
114                                        <div class="callout secondary">
115                                          <h5>This is a secondary callout</h5>
116                                          <p>It has an easy to override visual style, and is appropriately subdued.</p>
117                                          <a href="#">It's dangerous to go alone, take this.</a>
118                                        </div>
119
120                                        <div class="callout success">
121                                          <h5>This is a success callout</h5>
122                                          <p>It has an easy to override visual style, and is appropriately subdued.</p>
123                                          <a href="#">It's dangerous to go alone, take this.</a>
124                                        </div>
125
126                                        <div class="callout warning">
127                                          <h5>This is a warning callout</h5>
128                                          <p>It has an easy to override visual style, and is appropriately subdued.</p>
129                                          <a href="#">It's dangerous to go alone, take this.</a>
130                                        </div>
131
132                                        <div class="callout alert">
133                                          <h5>This is an alert callout</h5>
134                                          <p>It has an easy to override visual style, and is appropriately subdued.</p>
135                                          <a href="#">It's dangerous to go alone, take this.</a>
136                                        </div></div><hr>
137                                        <h2 id="close-button" class="docs-heading" data-magellan-target="close-button"><a class="docs-heading-icon" href="#close-button"></a>Close Button</h2><div class="docs-code" data-docs-code></div>
138
139                                          <div class="docs-code-live"><div class="callout">
140                                                <button class="close-button" aria-label="Close alert" type="button">
141                                                  <span aria-hidden="true">&times;</span>
142                                                </button>
143                                                <p>This is a static close button example.</p>
144                                          </div></div><hr>
145                                          <h2 id="drilldown-menu" class="docs-heading" data-magellan-target="drilldown-menu"><a class="docs-heading-icon" href="#drilldown-menu"></a>Drilldown Menu</h2><div class="docs-code" data-docs-code></div>
146
147                                                <div class="docs-code-live"><ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
148                                                  <li>
149                                                        <a href="#">Item 1</a>
150                                                        <ul class="vertical menu" id="m2">
151                                                          <li>
152                                                                <a href="#">Item 1A</a>
153                                                                <ul class="vertical menu" id="m3">
154                                                                  <li><a href="#">Item 1Aa</a></li>
155                                                                  <li><a href="#">Item 1Ba</a></li>
156                                                                  <li><a href="#">Item 1Ca</a></li>
157                                                                  <li><a href="#">Item 1Da</a></li>
158                                                                  <li><a href="#">Item 1Ea</a></li>
159                                                                </ul>
160                                                          </li>
161                                                          <li><a href="#">Item 1B</a></li>
162                                                          <li><a href="#">Item 1C</a></li>
163                                                          <li><a href="#">Item 1D</a></li>
164                                                          <li><a href="#">Item 1E</a></li>
165                                                        </ul>
166                                                  </li>
167                                                  <li>
168                                                        <a href="#">Item 2</a>
169                                                        <ul class="vertical menu">
170                                                          <li><a href="#">Item 2A</a></li>
171                                                          <li><a href="#">Item 2B</a></li>
172                                                          <li><a href="#">Item 2C</a></li>
173                                                          <li><a href="#">Item 2D</a></li>
174                                                          <li><a href="#">Item 2E</a></li>
175                                                        </ul>
176                                                  </li>
177                                                  <li>
178                                                        <a href="#">Item 3</a>
179                                                        <ul class="vertical menu">
180                                                          <li><a href="#">Item 3A</a></li>
181                                                          <li><a href="#">Item 3B</a></li>
182                                                          <li><a href="#">Item 3C</a></li>
183                                                          <li><a href="#">Item 3D</a></li>
184                                                          <li><a href="#">Item 3E</a></li>
185                                                        </ul>
186                                                  </li>
187                                                  <li><a href='#'> Item 4</a></li>
188                                                </ul></div><hr>
189                                                <h2 id="dropdown-menu" class="docs-heading" data-magellan-target="dropdown-menu"><a class="docs-heading-icon" href="#dropdown-menu"></a>Dropdown Menu</h2><div class="docs-code" data-docs-code></div>
190
191                                                  <div class="docs-code-live"><ul class="dropdown menu" data-dropdown-menu>
192                                                        <li>
193                                                          <a>Item 1</a>
194                                                          <ul class="menu">
195                                                                <li><a href="#">Item 1A Loooong</a></li>
196                                                                <li>
197                                                                  <a href='#'> Item 1 sub</a>
198                                                                  <ul class='menu'>
199                                                                        <li><a href='#'>Item 1 subA</a></li>
200                                                                        <li><a href='#'>Item 1 subB</a></li>
201                                                                        <li>
202                                                                          <a href='#'> Item 1 sub</a>
203                                                                          <ul class='menu'>
204                                                                                <li><a href='#'>Item 1 subA</a></li>
205                                                                                <li><a href='#'>Item 1 subB</a></li>
206                                                                          </ul>
207                                                                        </li>
208                                                                        <li>
209                                                                          <a href='#'> Item 1 sub</a>
210                                                                          <ul class='menu'>
211                                                                                <li><a href='#'>Item 1 subA</a></li>
212                                                                          </ul>
213                                                                        </li>
214                                                                  </ul>
215                                                                </li>
216                                                                <li><a href="#">Item 1B</a></li>
217                                                          </ul>
218                                                        </li>
219                                                        <li>
220                                                          <a href="#">Item 2</a>
221                                                          <ul class="menu">
222                                                                <li><a href="#">Item 2A</a></li>
223                                                                <li><a href="#">Item 2B</a></li>
224                                                          </ul>
225                                                        </li>
226                                                        <li><a href="#">Item 3</a></li>
227                                                        <li><a href='#'>Item 4</a></li>
228                                                  </ul></div><hr>
229                                                  <h2 id="dropdown-pane" class="docs-heading" data-magellan-target="dropdown-pane"><a class="docs-heading-icon" href="#dropdown-pane"></a>Dropdown Pane</h2><div class="docs-code" data-docs-code></div>
230
231                                                        <div class="docs-code-live"><button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
232                                                          <div class="dropdown-pane" id="example-dropdown" data-dropdown>
233                                                                Just some junk that needs to be said. Or not. Your choice.
234                                                          </div></div><hr>
235                                                          <h2 id="flex-video" class="docs-heading" data-magellan-target="flex-video"><a class="docs-heading-icon" href="#flex-video"></a>Flex Video</h2><div class="docs-code" data-docs-code></div>
236
237                                                                <div class="docs-code-live"><div class="flex-video">
238                                                                  <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
239                                                                </div></div><hr>
240                                                                <h2 id="float-classes" class="docs-heading" data-magellan-target="float-classes"><a class="docs-heading-icon" href="#float-classes"></a>Float Classes</h2><div class="docs-code" data-docs-code></div>
241
242                                                                  <div class="docs-code-live"><div class="callout clearfix">
243                                                                        <a class="button float-left">Left</a>
244                                                                        <a class="button float-right">Right</a>
245                                                                  </div></div><hr>
246                                                                  <h2 id="forms" class="docs-heading" data-magellan-target="forms"><a class="docs-heading-icon" href="#forms"></a>Forms</h2><div class="docs-code" data-docs-code></div>
247
248                                                                        <div class="docs-code-live"><form>
249                                                                          <label>Input Label
250                                                                                <input type="text" placeholder=".small-12.columns" aria-describedby="exampleHelpText">
251                                                                          </label>
252                                                                          <p class="help-text" id="exampleHelpText">Here's how you use this input field!</p>
253                                                                          <label>
254                                                                                How many puppies?
255                                                                                <input type="number" value="100">
256                                                                          </label>
257                                                                          <label>
258                                                                                What books did you read over summer break?
259                                                                                <textarea placeholder="None"></textarea>
260                                                                          </label>
261                                                                          <label>Select Menu
262                                                                                <select>
263                                                                                  <option value="husker">Husker</option>
264                                                                                  <option value="starbuck">Starbuck</option>
265                                                                                  <option value="hotdog">Hot Dog</option>
266                                                                                  <option value="apollo">Apollo</option>
267                                                                                </select>
268                                                                          </label>
269                                                                          <div class="row">
270                                                                                <fieldset class="large-6 columns">
271                                                                                  <legend>Choose Your Favorite</legend>
272                                                                                  <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
273                                                                                  <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
274                                                                                  <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
275                                                                                </fieldset>
276                                                                                <fieldset class="large-6 columns">
277                                                                                  <legend>Check these out</legend>
278                                                                                  <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
279                                                                                  <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
280                                                                                  <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
281                                                                                </fieldset>
282                                                                          </div>
283                                                                          <div class="row">
284                                                                                <div class="small-3 columns">
285                                                                                  <label for="middle-label" class="right middle">Label</label>
286                                                                                </div>
287                                                                                <div class="small-9 columns">
288                                                                                  <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
289                                                                                </div>
290                                                                          </div>
291                                                                          <div class="input-group">
292                                                                                <span class="input-group-label">$</span>
293                                                                                <input class="input-group-field" type="url">
294                                                                                <a class="input-group-button button">Submit</a>
295                                                                          </div>
296                                                                        </form></div><hr>
297                                                                        <h2 id="label" class="docs-heading" data-magellan-target="label"><a class="docs-heading-icon" href="#label"></a>Label</h2><div class="docs-code" data-docs-code></div>
298
299                                                                          <div class="docs-code-live"><span class="secondary label">Secondary Label</span>
300                                                                                <span class="success label">Success Label</span>
301                                                                                <span class="alert label">Alert Label</span>
302                                                                                <span class="warning label">Warning Label</span></div><hr>
303                                                                                <h2 id="media-object" class="docs-heading" data-magellan-target="media-object"><a class="docs-heading-icon" href="#media-object"></a>Media Object</h2><div class="docs-code" data-docs-code></div>
304
305                                                                                  <div class="docs-code-live"><div class="media-object">
306                                                                                        <div class="media-object-section">
307                                                                                          <img src= "http://placeimg.com/200/200/people">
308                                                                                        </div>
309                                                                                        <div class="media-object-section">
310                                                                                          <h4>Dreams feel real while we're in them.</h4>
311                                                                                          <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
312                                                                                        </div>
313                                                                                  </div></div><hr>
314                                                                                  <h2 id="menu" class="docs-heading" data-magellan-target="menu"><a class="docs-heading-icon" href="#menu"></a>Menu</h2><div class="docs-code" data-docs-code></div>
315
316                                                                                        <div class="docs-code-live"><ul class="menu">
317                                                                                          <li><a href="#">One</a></li>
318                                                                                          <li><a href="#">Two</a></li>
319                                                                                          <li><a href="#">Three</a></li>
320                                                                                          <li><a href="#">Four</a></li>
321                                                                                        </ul>
322
323                                                                                        <ul class="menu icon-top">
324                                                                                          <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
325                                                                                          <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
326                                                                                          <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
327                                                                                          <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
328                                                                                        </ul></div><hr>
329                                                                                        <h2 id="orbit" class="docs-heading" data-magellan-target="orbit"><a class="docs-heading-icon" href="#orbit"></a>Orbit</h2><div class="docs-code" data-docs-code></div>
330
331                                                                                          <div class="docs-code-live"><div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
332                                                                                                <ul class="orbit-container">
333
334                                                                                                  <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
335                                                                                                  <li class="is-active orbit-slide">
336                                                                                                        <div>
337                                                                                                          <h3 class="text-center">You can also throw some text in here!</h3>
338                                                                                                          <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
339                                                                                                          <h3 class="text-center">This Orbit slide has chill</h3>
340                                                                                                        </div>
341                                                                                                  </li>
342                                                                                                  <li class="orbit-slide">
343                                                                                                        <div>
344                                                                                                          <h3 class="text-center">You can also throw some text in here!</h3>
345                                                                                                          <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
346                                                                                                          <h3 class="text-center">This Orbit slide has chill</h3>
347                                                                                                        </div>
348                                                                                                  </li>
349                                                                                                  <li class="orbit-slide">
350                                                                                                        <div>
351                                                                                                          <h3 class="text-center">You can also throw some text in here!</h3>
352                                                                                                          <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
353                                                                                                          <h3 class="text-center">This Orbit slide has chill</h3>
354                                                                                                        </div>
355                                                                                                  </li>
356                                                                                                  <li class="orbit-slide">
357                                                                                                        <div>
358                                                                                                          <h3 class="text-center">You can also throw some text in here!</h3>
359                                                                                                          <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.</p>
360                                                                                                          <h3 class="text-center">This Orbit slide has chill</h3>
361                                                                                                        </div>
362                                                                                                  </li>
363                                                                                                </ul>
364                                                                                                <nav class="orbit-bullets">
365                                                                                                  <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
366                                                                                                  <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
367                                                                                                  <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
368                                                                                                  <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
369                                                                                                </nav>
370                                                                                          </div></div><hr>
371                                                                                          <h2 id="pagination" class="docs-heading" data-magellan-target="pagination"><a class="docs-heading-icon" href="#pagination"></a>Pagination</h2><div class="docs-code" data-docs-code></div>
372
373                                                                                                <div class="docs-code-live"><ul class="pagination" role="navigation" aria-label="Pagination">
374
375                                                                                                  <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
376                                                                                                  <li><a href="#" aria-label="Page 2">2</a></li>
377                                                                                                  <li><a href="#" aria-label="Page 3">3</a></li>
378                                                                                                  <li><a href="#" aria-label="Page 4">4</a></li>
379                                                                                                  <li class="ellipsis" aria-hidden="true"></li>
380                                                                                                  <li><a href="#" aria-label="Page 12">12</a></li>
381                                                                                                  <li><a href="#" aria-label="Page 13">13</a></li>
382                                                                                                  <li><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
383                                                                                                </ul></div><hr>
384                                                                                                <h2 id="slider" class="docs-heading" data-magellan-target="slider"><a class="docs-heading-icon" href="#slider"></a>Slider</h2><div class="docs-code" data-docs-code></div>
385
386                                                                                                  <div class="docs-code-live"><div class="slider" data-slider data-initial-start='50' data-end='200'>
387                                                                                                        <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
388                                                                                                        <span class="slider-fill" data-slider-fill></span>
389                                                                                                        <input type="hidden">
390                                                                                                  </div>
391
392                                                                                                  <div class="slider vertical" data-slider data-initial-start='25' data-end='200' data-vertical="true">
393                                                                                                        <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
394                                                                                                        <span class="slider-fill" data-slider-fill></span>
395                                                                                                        <input type="hidden">
396                                                                                                  </div>
397
398                                                                                                  <div class="slider" data-slider data-initial-start='25' data-initial-end='75'>
399                                                                                                        <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
400                                                                                                        <span class="slider-fill" data-slider-fill></span>
401                                                                                                        <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
402                                                                                                        <input type="hidden">
403                                                                                                        <input type="hidden">
404                                                                                                  </div></div><hr>
405                                                                                                  <h2 id="switch" class="docs-heading" data-magellan-target="switch"><a class="docs-heading-icon" href="#switch"></a>Switch</h2><div class="docs-code" data-docs-code></div>
406
407                                                                                                        <div class="docs-code-live"><div class="switch tiny">
408                                                                                                          <input class="switch-input" id="tinySwitch" type="checkbox" name="exampleSwitch">
409                                                                                                          <label class="switch-paddle" for="tinySwitch">
410                                                                                                                <span class="show-for-sr">Tiny Sandwiches Enabled</span>
411                                                                                                          </label>
412                                                                                                        </div>
413
414                                                                                                        <div class="switch small">
415                                                                                                          <input class="switch-input" id="smallSwitch" type="checkbox" name="exampleSwitch">
416                                                                                                          <label class="switch-paddle" for="smallSwitch">
417                                                                                                                <span class="show-for-sr">Small Portions Only</span>
418                                                                                                          </label>
419                                                                                                        </div>
420
421                                                                                                        <div class="switch large">
422                                                                                                          <input class="switch-input" id="largeSwitch" type="checkbox" name="exampleSwitch">
423                                                                                                          <label class="switch-paddle" for="largeSwitch">
424                                                                                                                <span class="show-for-sr">Show Large Elephants</span>
425                                                                                                          </label>
426                                                                                                        </div></div><hr>
427                                                                                                        <h2 id="table" class="docs-heading" data-magellan-target="table"><a class="docs-heading-icon" href="#table"></a>Table</h2><div class="docs-code" data-docs-code></div>
428
429                                                                                                          <div class="docs-code-live"><table>
430                                                                                                                <thead>
431                                                                                                                  <tr>
432                                                                                                                        <th width="200">Table Header</th>
433                                                                                                                        <th>Table Header</th>
434                                                                                                                        <th width="150">Table Header</th>
435                                                                                                                        <th width="150">Table Header</th>
436                                                                                                                  </tr>
437                                                                                                                </thead>
438                                                                                                                <tbody>
439                                                                                                                  <tr>
440                                                                                                                        <td>Content Goes Here</td>
441                                                                                                                        <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
442                                                                                                                        <td>Content Goes Here</td>
443                                                                                                                        <td>Content Goes Here</td>
444                                                                                                                  </tr>
445                                                                                                                  <tr>
446                                                                                                                        <td>Content Goes Here</td>
447                                                                                                                        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
448                                                                                                                        <td>Content Goes Here</td>
449                                                                                                                        <td>Content Goes Here</td>
450                                                                                                                  </tr>
451                                                                                                                  <tr>
452                                                                                                                        <td>Content Goes Here</td>
453                                                                                                                        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
454                                                                                                                        <td>Content Goes Here</td>
455                                                                                                                        <td>Content Goes Here</td>
456                                                                                                                  </tr>
457                                                                                                                </tbody>
458                                                                                                          </table></div><hr>
459                                                                                                          <h2 id="tabs" class="docs-heading" data-magellan-target="tabs"><a class="docs-heading-icon" href="#tabs"></a>Tabs</h2><div class="docs-code" data-docs-code></div>
460
461                                                                                                                <div class="docs-code-live"><ul class="tabs" data-tabs id="example-tabs">
462                                                                                                                  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
463                                                                                                                  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
464                                                                                                                  <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
465                                                                                                                  <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
466                                                                                                                  <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
467                                                                                                                  <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
468                                                                                                                </ul>
469
470                                                                                                                <div class="tabs-content" data-tabs-content="example-tabs">
471                                                                                                                  <div class="tabs-panel is-active" id="panel1">
472                                                                                                                        <p>one</p>
473                                                                                                                        <p>Check me out! I'm a super cool Tab panel with text content!</p>
474                                                                                                                  </div>
475                                                                                                                  <div class="tabs-panel" id="panel2">
476                                                                                                                        <p>two</p>
477                                                                                                                        <img class="thumbnail" src="assets/img/rectangle-7.jpg">
478                                                                                                                  </div>
479                                                                                                                  <div class="tabs-panel" id="panel3">
480                                                                                                                        <p>three</p>
481                                                                                                                        <p>Check me out! I'm a super cool Tab panel with text content!</p>
482                                                                                                                  </div>
483                                                                                                                  <div class="tabs-panel" id="panel4">
484                                                                                                                        <p>four</p>
485                                                                                                                        <img class="thumbnail" src="assets/img/rectangle-2.jpg">
486                                                                                                                  </div>
487                                                                                                                  <div class="tabs-panel" id="panel5">
488                                                                                                                        <p>five</p>
489                                                                                                                        <p>Check me out! I'm a super cool Tab panel with text content!</p>
490                                                                                                                  </div>
491                                                                                                                  <div class="tabs-panel" id="panel6">
492                                                                                                                        <p>six</p>
493                                                                                                                        <img class="thumbnail" src="assets/img/rectangle-8.jpg">
494                                                                                                                  </div>
495                                                                                                                </div></div><hr>
496                                                                                                                <h2 id="thumbnail" class="docs-heading" data-magellan-target="thumbnail"><a class="docs-heading-icon" href="#thumbnail"></a>Thumbnail</h2><div class="docs-code" data-docs-code></div>
497
498                                                                                                                  <div class="docs-code-live"><div class="row">
499                                                                                                                        <div class="small-4 columns">
500                                                                                                                          <img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
501                                                                                                                        </div>
502                                                                                                                        <div class="small-4 columns">
503                                                                                                                          <img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">
504                                                                                                                        </div>
505                                                                                                                        <div class="small-4 columns">
506                                                                                                                          <img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
507                                                                                                                        </div>
508                                                                                                                  </div></div><hr>
509                                                                                                                  <h2 id="title-bar" class="docs-heading" data-magellan-target="title-bar"><a class="docs-heading-icon" href="#title-bar"></a>Title Bar</h2><div class="docs-code" data-docs-code></div>
510
511                                                                                                                        <div class="docs-code-live"><div class="title-bar">
512                                                                                                                          <div class="title-bar-left">
513                                                                                                                                <button class="menu-icon" type="button"></button>
514                                                                                                                                <span class="title-bar-title">Foundation</span>
515                                                                                                                          </div>
516                                                                                                                          <div class="title-bar-right">
517                                                                                                                                <button class="menu-icon" type="button"></button>
518                                                                                                                          </div>
519                                                                                                                        </div></div><hr>
520                                                                                                                        <h2 id="tooltip" class="docs-heading" data-magellan-target="tooltip"><a class="docs-heading-icon" href="#tooltip"></a>Tooltip</h2><div class="docs-code" data-docs-code></div>
521
522                                                                                                                        <div class="docs-code-live"><p>The <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Fancy word for a beetle.">scarabaeus</span> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.</p></div><hr>
523                                                                                                                        <h2 id="top-bar" class="docs-heading" data-magellan-target="top-bar"><a class="docs-heading-icon" href="#top-bar"></a>Top Bar</h2><div class="docs-code" data-docs-code></div>
524
525                                                                                                                          <div class="docs-code-live"><div class="top-bar">
526                                                                                                                                <div class="top-bar-left">
527                                                                                                                                  <ul class="dropdown menu" data-dropdown-menu>
528                                                                                                                                        <li class="menu-text">Site Title</li>
529                                                                                                                                        <li class="has-submenu">
530                                                                                                                                          <a href="#">One</a>
531                                                                                                                                          <ul class="submenu menu vertical" data-submenu>
532                                                                                                                                                <li><a href="#">One</a></li>
533                                                                                                                                                <li><a href="#">Two</a></li>
534                                                                                                                                                <li><a href="#">Three</a></li>
535                                                                                                                                          </ul>
536                                                                                                                                        </li>
537                                                                                                                                        <li><a href="#">Two</a></li>
538                                                                                                                                        <li><a href="#">Three</a></li>
539                                                                                                                                  </ul>
540                                                                                                                                </div>
541                                                                                                                                <div class="top-bar-right">
542                                                                                                                                  <ul class="menu">
543                                                                                                                                        <li><input type="search" placeholder="Search"></li>
544                                                                                                                                        <li><button type="button" class="button">Search</button></li>
545                                                                                                                                  </ul>
546                                                                                                                                </div>
547                                                                                                                          </div></div>
Note: See TracBrowser for help on using the repository browser.