Site Search Icon
Trencor Two Brands One Commitment

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>

This website uses cookies to deliver the best user experience. Some cookies are necessary for the site’s performance, and others allow us to customize your experience. We also use cookies to deliver advertising messages and offers on the website that are relevant to you. Some of these cookies include location tracking technologies. You can read more about how we use cookies and update your settings at any time.