Foundation Code Skills These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.
Foundation Forum Join the Foundation community to ask a question or show off your knowlege.
Here’s your basic grid:
This is a twelve column section in a row. Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.
NOTE: You should refer to the Foundation version of these snippets if you find one that operate as you expect it to, but we hope having them with the template will make your page development faster and easier.
Abide
<formdata-abidenovalidate><divdata-abide-errorclass="alert callout"style="display: none;"><p><iclass="fi-alert"></i> There are some errors in your form.</p></div><divclass="row"><divclass="small-12 columns"><label>Number Required
<inputtype="text"placeholder="1234"aria-describedby="exampleHelpText"requiredpattern="number"><spanclass="form-error">
Yo, you had better fill this out, it's required.
</span></label><pclass="help-text"id="exampleHelpText">Here's how you use this input field!</p></div><divclass="small-12 columns"><label>Nothing Required!
<inputtype="text"placeholder="Use me, or don't"aria-describedby="exampleHelpTex"data-abide-ignore></label><pclass="help-text"id="exampleHelpTex">This input is ignored by Abide using `data-abide-ignore`</p></div><divclass="small-12 columns"><label>Password Required
<inputtype="password"id="password"placeholder="yeti4preZ"aria-describedby="exampleHelpText"required ><spanclass="form-error">
I'm required!
</span></label><pclass="help-text"id="exampleHelpText">Enter a password please.</p></div><divclass="small-12 columns"><label>Re-enter Password
<inputtype="password"placeholder="yeti4preZ"aria-describedby="exampleHelpText2"requiredpattern="alpha_numeric"data-equalto="password"><spanclass="form-error">
Hey, passwords are supposed to match!
</span></label><pclass="help-text"id="exampleHelpText2">This field is using the `data-equalto="password"` attribute, causing it to match the password field above.</p></div></div><divclass="row"><divclass="medium-6 columns"><label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
<inputtype="text"placeholder="http://foundation.zurb.com"pattern="url"></label></div><divclass="medium-6 columns"><label>European Cars, Choose One, it can't be the blank option.
<selectid="select"required><optionvalue=""></option><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="mercedes">Mercedes</option><optionvalue="audi">Audi</option></select></label></div></div><divclass="row"><fieldsetclass="large-6 columns"><legend>Choose Your Favorite, and this is required, so you have to pick one.</legend><inputtype="radio"name="pokemon"value="Red"id="pokemonRed"><labelfor="pokemonRed">Red</label><inputtype="radio"name="pokemon"value="Blue"id="pokemonBlue"required><labelfor="pokemonBlue">Blue</label><inputtype="radio"name="pokemon"value="Yellow"id="pokemonYellow"><labelfor="pokemonYellow">Yellow</label></fieldset><fieldsetclass="large-6 columns"><legend>Choose Your Favorite - not required, you can leave this one blank.</legend><inputtype="radio"name="pockets"value="Red"id="pocketsRed"><labelfor="pocketsRed">Red</label><inputtype="radio"name="pockets"value="Blue"id="pocketsBlue"><labelfor="pocketsBlue">Blue</label><inputtype="radio"name="pockets"value="Yellow"id="pocketsYellow"><labelfor="pocketsYellow">Yellow</label></fieldset><fieldsetclass="large-6 columns"><legend>Check these out</legend><inputid="checkbox1"type="checkbox"><labelfor="checkbox1">Checkbox 1</label><inputid="checkbox2"type="checkbox"required><labelfor="checkbox2">Checkbox 2</label><inputid="checkbox3"type="checkbox"><labelfor="checkbox3">Checkbox 3</label></fieldset></div><divclass="row"><fieldsetclass="large-6 columns"><buttonclass="button"type="submit"value="Submit">Submit</button></fieldset><fieldsetclass="large-6 columns"><buttonclass="button"type="reset"value="Reset">Reset</button></fieldset></div></form>
Accordion
<ulclass="accordion"data-accordionrole="tablist"><liclass="accordion-item is-active"><!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. --><ahref="#panel1d"role="tab"class="accordion-title"id="panel1d-heading"aria-controls="panel1d">Accordion 1</a><!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. --><divid="panel1d"class="accordion-content"role="tabpanel"data-tab-contentaria-labelledby="panel1d-heading">
Panel 1. Lorem ipsum dolor
</div></li><liclass="accordion-item"><!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. --><ahref="#panel1d"role="tab"class="accordion-title"id="panel1d-heading"aria-controls="panel1d">Accordion 1</a><!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. --><divid="panel1d"class="accordion-content"role="tabpanel"data-tab-contentaria-labelledby="panel1d-heading">
Panel 2. Lorem ipsum dolor
</div></li><liclass="accordion-item"><!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. --><ahref="#panel1d"role="tab"class="accordion-title"id="panel1d-heading"aria-controls="panel1d">Accordion 1</a><!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. --><divid="panel1d"class="accordion-content"role="tabpanel"data-tab-contentaria-labelledby="panel1d-heading">
Panel 3. Lorem ipsum dolor
</div></li></ul>
<divclass="callout"><h5>This is a callout.</h5><p>It has an easy to override visual style, and is appropriately subdued.</p><ahref="#">It's dangerous to go alone, take this.</a></div><divclass="callout secondary"><h5>This is a secondary callout</h5><p>It has an easy to override visual style, and is appropriately subdued.</p><ahref="#">It's dangerous to go alone, take this.</a></div><divclass="callout success"><h5>This is a success callout</h5><p>It has an easy to override visual style, and is appropriately subdued.</p><ahref="#">It's dangerous to go alone, take this.</a></div><divclass="callout warning"><h5>This is a warning callout</h5><p>It has an easy to override visual style, and is appropriately subdued.</p><ahref="#">It's dangerous to go alone, take this.</a></div><divclass="callout alert"><h5>This is an alert callout</h5><p>It has an easy to override visual style, and is appropriately subdued.</p><ahref="#">It's dangerous to go alone, take this.</a></div>
This is a callout.
It has an easy to override visual style, and is appropriately subdued.
<divclass="alert callout"data-closable><h5>This is Important!</h5><p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p><p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p><buttonclass="close-button"aria-label="Dismiss alert"type="button"data-close><spanaria-hidden="true">×</span></button></div><divclass="success callout"data-closable="slide-out-right"><h5>This a friendly message.</h5><p>And when you're done with me, I close using a Motion UI animation.</p><buttonclass="close-button"aria-label="Dismiss alert"type="button"data-close><spanaria-hidden="true">×</span></button></div>
This is Important!
But when you're done reading it, click the close button in the corner to dismiss this alert.
I'm using the default data-closable parameters, and simply fade out.
This a friendly message.
And when you're done with me, I close using a Motion UI animation.
<buttonclass="button"type="button"data-toggle="example-dropdown">Toggle Dropdown</button><divclass="dropdown-pane"id="example-dropdown"data-dropdown>
Just some junk that needs to be said. Or not. Your choice.
</div>
Just some junk that needs to be said. Or not. Your choice.
Equalizer
<divclass="row"data-equalizerdata-equalize-on="medium"id="test-eq"><divclass="medium-4 columns"><divclass="callout"data-equalizer-watch><imgsrc= "assets/img/generic/square-1.jpg"></div></div><divclass="medium-4 columns"><divclass="callout"data-equalizer-watch><p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p></div></div><divclass="medium-4 columns"><divclass="callout"data-equalizer-watch><imgsrc= "assets/img/generic/rectangle-1.jpg"></div></div></div>
Pellentesque habitant morbi tristique senectus et netus et, ante.
<form><label>Input Label
<inputtype="text"placeholder=".small-12.columns"aria-describedby="exampleHelpText"></label><pclass="help-text"id="exampleHelpText">Here's how you use this input field!</p><label>
How many puppies?
<inputtype="number"value="100"></label><label>
What books did you read over summer break?
<textareaplaceholder="None"></textarea></label><label>Select Menu
<select><optionvalue="husker">Husker</option><optionvalue="starbuck">Starbuck</option><optionvalue="hotdog">Hot Dog</option><optionvalue="apollo">Apollo</option></select></label><divclass="row"><fieldsetclass="large-6 columns"><legend>Choose Your Favorite</legend><inputtype="radio"name="pokemon"value="Red"id="pokemonRed"required><labelfor="pokemonRed">Red</label><inputtype="radio"name="pokemon"value="Blue"id="pokemonBlue"><labelfor="pokemonBlue">Blue</label><inputtype="radio"name="pokemon"value="Yellow"id="pokemonYellow"><labelfor="pokemonYellow">Yellow</label></fieldset><fieldsetclass="large-6 columns"><legend>Check these out</legend><inputid="checkbox1"type="checkbox"><labelfor="checkbox1">Checkbox 1</label><inputid="checkbox2"type="checkbox"><labelfor="checkbox2">Checkbox 2</label><inputid="checkbox3"type="checkbox"><labelfor="checkbox3">Checkbox 3</label></fieldset></div><divclass="row"><divclass="small-3 columns"><labelfor="middle-label"class="text-right middle">Label</label></div><divclass="small-9 columns"><inputtype="text"id="middle-label"placeholder="Right- and middle-aligned text input"></div></div><divclass="input-group"><spanclass="input-group-label">$</span><inputclass="input-group-field"type="url"><aclass="input-group-button button">Submit</a></div></form>
<ulclass="horizontal menu"data-magellan><li><ahref="#first">First Arrival</a></li><li><ahref="#second">Second Arrival</a></li><li><ahref="#third">Third Arrival</a></li></ul><divclass="sections"><sectionid="first"data-magellan-target="first"><h4>First section</h4><p>Duis scelerisque ligula ut metus rhoncus scelerisque. Integer ut egestas metus. Nulla facilisi. Aenean luctus magna lobortis ligula rhoncus, sit amet lacinia lorem sagittis. Sed ultrices at metus id aliquet. Vestibulum in condimentum quam, id ornare erat. Vivamus nec justo quis ex fringilla condimentum ac non quam.</p></section><sectionid="second"data-magellan-target="second"><h4>Second section</h4><p>Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt.</p></section><sectionid="third"data-magellan-target="third"><h4>Second section</h4><p>Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt.</p></section></div>
Duis scelerisque ligula ut metus rhoncus scelerisque. Integer ut egestas metus. Nulla facilisi. Aenean luctus magna lobortis ligula rhoncus, sit amet lacinia lorem sagittis. Sed ultrices at metus id aliquet. Vestibulum in condimentum quam, id ornare erat. Vivamus nec justo quis ex fringilla condimentum ac non quam.
Second section
Sed vulputate, felis interdum molestie viverra, neque urna placerat dui, ac efficitur est magna eu tellus. Nunc sodales consequat eros at bibendum. Vestibulum hendrerit gravida elit non eleifend. Nunc at vehicula ipsum. Vestibulum eu suscipit felis. Proin ipsum felis, consequat congue quam ac, efficitur tincidunt ex. Morbi accumsan sem iaculis nunc malesuada tincidunt.
Second section
Aliquam orci orci, maximus a pulvinar id, tincidunt a neque. Suspendisse eros diam, finibus et faucibus ac, suscipit feugiat orci. Morbi scelerisque sem id blandit malesuada. Donec suscipit tincidunt dolor in blandit. Nam rhoncus risus vitae lacinia dictum. Cras lobortis, nulla non faucibus mattis, tellus nibh condimentum eros, posuere volutpat arcu risus vel ante. In ut ullamcorper eros, et vestibulum risus. Fusce auctor risus vitae diam viverra tincidunt.
Media Object
<divclass="media-object"><divclass="media-object-section"><imgsrc= "http://placeimg.com/200/200/people"></div><divclass="media-object-section"><h4>Dreams feel real while we're in them.</h4><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></div></div>
Dreams feel real while we're in them.
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.
<divclass="orbit"role="region"aria-label="Favorite Space Pictures"data-orbit><ulclass="orbit-container"><buttonclass="orbit-previous"aria-label="previous"><spanclass="show-for-sr">Previous Slide</span>◀</button><buttonclass="orbit-next"aria-label="next"><spanclass="show-for-sr">Next Slide</span>▶</button><liclass="is-active orbit-slide"><div><h3class="text-center">You can also throw some text in here!</h3><pclass="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><h3class="text-center">This Orbit slide has chill</h3></div></li><liclass="orbit-slide"><div><h3class="text-center">You can also throw some text in here!</h3><pclass="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><h3class="text-center">This Orbit slide has chill</h3></div></li><liclass="orbit-slide"><div><h3class="text-center">You can also throw some text in here!</h3><pclass="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><h3class="text-center">This Orbit slide has chill</h3></div></li><liclass="orbit-slide"><div><h3class="text-center">You can also throw some text in here!</h3><pclass="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><h3class="text-center">This Orbit slide has chill</h3></div></li></ul><navclass="orbit-bullets"><buttonclass="is-active"data-slide="0"><spanclass="show-for-sr">First slide details.</span><spanclass="show-for-sr">Current Slide</span></button><buttondata-slide="1"><spanclass="show-for-sr">Second slide details.</span></button><buttondata-slide="2"><spanclass="show-for-sr">Third slide details.</span></button><buttondata-slide="3"><spanclass="show-for-sr">Fourth slide details.</span></button></nav></div>
You can also throw some text in here!
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.
This Orbit slide has chill
You can also throw some text in here!
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.
This Orbit slide has chill
You can also throw some text in here!
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.
This Orbit slide has chill
You can also throw some text in here!
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.
This Orbit slide has chill
Pagination
(Note: using this in BC will require some custom coding)
<divclass="title-bar"data-responsive-toggle="example-menu"data-hide-for="medium"><buttonclass="menu-icon"type="button"data-toggle></button><divclass="title-bar-title">Menu</div></div><divclass="top-bar"id="example-menu"><divclass="top-bar-left"><ulclass="dropdown menu"data-dropdown-menu><liclass="menu-text">Site Title</li><liclass="has-submenu"><ahref="#">One</a><ulclass="submenu menu vertical"data-submenu><li><ahref="#">One</a></li><li><ahref="#">Two</a></li><li><ahref="#">Three</a></li></ul></li><li><ahref="#">Two</a></li><li><ahref="#">Three</a></li></ul></div><divclass="top-bar-right"><ulclass="menu"><li><inputtype="search"placeholder="Search"></li><li><buttontype="button"class="button">Search</button></li></ul></div></div>
<p><adata-open="exampleModal1">Click me for a modal</a></p><divclass="reveal"id="exampleModal1"data-reveal><h1>Awesome. I Have It.</h1><pclass="lead">Your couch. It is mine.</p><p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p><buttonclass="close-button"data-closearia-label="Close reveal"type="button"><spanaria-hidden="true">×</span></button></div>
<divclass="row"><divclass="columns small-12"><divclass="columns small-6"id="example1"data-something><pid="doodle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p></div><divclass="columns small-6 right"data-sticky-container><divclass="sticky"data-stickydata-anchor="example1"><imgclass="thumbnail"src="assets/img/generic/rectangle-3.jpg"></div></div></div></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Switch
<divclass="switch tiny"><inputclass="switch-input"id="tinySwitch"type="checkbox"name="exampleSwitch"><labelclass="switch-paddle"for="tinySwitch"><spanclass="show-for-sr">Tiny Sandwiches Enabled</span></label></div><divclass="switch small"><inputclass="switch-input"id="smallSwitch"type="checkbox"name="exampleSwitch"><labelclass="switch-paddle"for="smallSwitch"><spanclass="show-for-sr">Small Portions Only</span></label></div><divclass="switch large"><inputclass="switch-input"id="largeSwitch"type="checkbox"name="exampleSwitch"><labelclass="switch-paddle"for="largeSwitch"><spanclass="show-for-sr">Show Large Elephants</span></label></div>
Table
<table><thead><tr><thwidth="200">Table Header</th><th>Table Header</th><thwidth="150">Table Header</th><thwidth="150">Table Header</th></tr></thead><tbody><tr><td>Content Goes Here</td><td>This is longer content Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><td>Content Goes Here</td></tr><tr><td>Content Goes Here</td><td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><td>Content Goes Here</td></tr><tr><td>Content Goes Here</td><td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><td>Content Goes Here</td></tr></tbody></table>
Table Header
Table Header
Table Header
Table Header
Content Goes Here
This is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
Tabs
<ulclass="tabs"data-tabsid="example-tabs"><liclass="tabs-title is-active"><ahref="#panel1"aria-selected="true">Tab 1</a></li><liclass="tabs-title"><ahref="#panel2">Tab 2</a></li><liclass="tabs-title"><ahref="#panel3">Tab 3</a></li><liclass="tabs-title"><ahref="#panel4">Tab 4</a></li><liclass="tabs-title"><ahref="#panel5">Tab 5</a></li><liclass="tabs-title"><ahref="#panel6">Tab 6</a></li></ul><divclass="tabs-content"data-tabs-content="example-tabs"><divclass="tabs-panel is-active"id="panel1"><p>one</p><p>Check me out! I'm a super cool Tab panel with text content!</p></div><divclass="tabs-panel"id="panel2"><p>two</p><imgclass="thumbnail"src="assets/img/generic/rectangle-7.jpg"></div><divclass="tabs-panel"id="panel3"><p>three</p><p>Check me out! I'm a super cool Tab panel with text content!</p></div><divclass="tabs-panel"id="panel4"><p>four</p><imgclass="thumbnail"src="assets/img/generic/rectangle-2.jpg"></div><divclass="tabs-panel"id="panel5"><p>five</p><p>Check me out! I'm a super cool Tab panel with text content!</p></div><divclass="tabs-panel"id="panel6"><p>six</p><imgclass="thumbnail"src="assets/img/generic/rectangle-8.jpg"></div></div>
Check me out! I'm a super cool Tab panel with text content!
two
three
Check me out! I'm a super cool Tab panel with text content!
four
five
Check me out! I'm a super cool Tab panel with text content!
six
Thumbnail
<divclass="row"><divclass="small-4 columns"><imgclass="thumbnail"src="assets/img/thumbnail/01.jpg"alt="Photo of Uranus."></div><divclass="small-4 columns"><imgclass="thumbnail"src="assets/img/thumbnail/02.jpg"alt="Photo of Neptune."></div><divclass="small-4 columns"><imgclass="thumbnail"src="assets/img/thumbnail/03.jpg"alt="Photo of Pluto."></div></div>
<p>The <spandata-tooltiparia-haspopup="true"class="has-tip"data-disable-hover='false'tabindex=1title="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>
The scarabaeus 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.
Top Bar
<divclass="top-bar"><divclass="top-bar-left"><ulclass="dropdown menu"data-dropdown-menu><liclass="menu-text">Site Title</li><liclass="has-submenu"><ahref="#">One</a><ulclass="submenu menu vertical"data-submenu><li><ahref="#">One</a></li><li><ahref="#">Two</a></li><li><ahref="#">Three</a></li></ul></li><li><ahref="#">Two</a></li><li><ahref="#">Three</a></li></ul></div><divclass="top-bar-right"><ulclass="menu"><li><inputtype="search"placeholder="Search"></li><li><buttontype="button"class="button">Search</button></li></ul></div></div>
<p>You are on a small screen or larger.</p><pclass="show-for-medium">You are on a medium screen or larger.</p><pclass="show-for-large">You are on a large screen or larger.</p><pclass="show-for-small-only">You are <em>definitely</em> on a small screen.</p><pclass="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p><pclass="show-for-large-only">You are <em>definitely</em> on a large screen.</p><pclass="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p><pclass="hide-for-large">You are <em>not</em> on a large screen or larger.</p><pclass="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p><pclass="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p><pclass="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p><pclass="hide">Can't touch this.</p><pclass="invisible">Can sort of touch this.</p><pclass="show-for-landscape">You are in landscape orientation.</p><pclass="show-for-portrait">You are in portrait orientation.</p><pclass="show-for-sr">This text can only be read by a screen reader.</p><p>There's a line of text above this one, you just can't see it.</p><paria-hidden="true">This text can be seen, but won't be read by a screen reader.</p><p><aclass="show-on-focus"href="#mainContent">Skip to Content</a></p><headerid="header"role="banner"></header><mainid="mainContent"role="main"tabindex="0"></main>
You are on a small screen or larger.
You are on a medium screen or larger.
You are on a large screen or larger.
You are definitely on a small screen.
You are definitely on a medium screen.
You are definitely on a large screen.
You are not on a medium screen or larger.
You are not on a large screen or larger.
You are definitely not on a small screen.
You are definitely not on a medium screen.
You are definitely not on a large screen.
Can't touch this.
Can sort of touch this.
You are in landscape orientation.
You are in portrait orientation.
This text can only be read by a screen reader.
There's a line of text above this one, you just can't see it.
This text can be seen, but won't be read by a screen reader.