Theme Components

Drop Down Menu

See https://foundation.zurb.com/sites/docs/dropdown-menu.html

<ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">Item 1</a> <ul class="menu"> <li><a href="#">Item 1A</a></li> <li><a href="#">Item 1B</a> <ul class="menu"> <li><a href="#">Item 1B - i</a></li> <li><a href="#">Item 1B - ii</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul>

Slick Slider

See http://kenwheeler.github.io/slick/ for more options

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
<div class="slider"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> </div>

Tabs

See https://foundation.zurb.com/sites/docs/tabs.html for more options

Panel 1

Panel 2

<ul class="tabs" data-tabs id="example-tabs"> <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li> <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li> </ul> <div class="tabs-content" data-tabs-content="example-tabs"> <div class="tabs-panel is-active" id="panel1"> <p>Panel 1</p> </div> <div class="tabs-panel" id="panel2"> <p>Panel 2</p> </div> </div>

Reveal (modal)

See https://foundation.zurb.com/sites/docs/reveal.html for more options

Tiny Modal

Small Modal

Large Modal

Full Modal

<p><button class="button" data-open="exampleModal1">Tiny</button></p> <div class="reveal tiny" id="exampleModal1" data-reveal> <p>Tiny Modal</p> <button class="close-button" data-close aria-label="Close modal" type="button"> <span aria-hidden="true">&times;</span> </button> </div> <p><button class="button" data-open="exampleModal2">Small</button></p> <div class="reveal small" id="exampleModal2" data-reveal> <p>Small Modal</p> <button class="close-button" data-close aria-label="Close modal" type="button"> <span aria-hidden="true">&times;</span> </button> </div> <p><button class="button" data-open="exampleModal3">Large</button></p> <div class="reveal large" id="exampleModal3" data-reveal> <p>Large Modal</p> <button class="close-button" data-close aria-label="Close modal" type="button"> <span aria-hidden="true">&times;</span> </button> </div> <p><button class="button" data-open="exampleModal4">Full</button></p> <div class="reveal full" id="exampleModal4" data-reveal> <p>Full Modal</p> <button class="close-button" data-close aria-label="Close modal" type="button"> <span aria-hidden="true">&times;</span> </button> </div>

Drop Down

See https://foundation.zurb.com/sites/docs/dropdown.html for more options

<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button> <div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true"> Click dropdown example </div> <button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button> <div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true"> Hover dropdown example </div>