Accordion

Accordion

.accordion

The Accordion Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at. Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at. Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!

Another Accordion Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at. Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at. Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!

<div class="accordion">
  <div class="accordion__header">
    <h3>The Accordion Title</h3>
    <span class="accordion__button"></span>
  </div>
  <div class="accordion__content">
    <div class="accordion__inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at.
        Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at.
        Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!</p>
    </div>
  </div>
</div>
<div class="accordion">
  <div class="accordion__header">
    <h3>Another Accordion Title</h3>
    <span class="accordion__button"></span>
  </div>
  <div class="accordion__content">
    <div class="accordion__inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at.
        Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est soluta maiores optio incidunt alias aut, sed, ipsam at.
        Dolorem exercitationem reprehenderit culpa velit suscipit aut dolores sapiente quisquam officia ab!</p>
    </div>
  </div>
</div>

Attributes

Icons

.icon- Inspect the markup to see the modefiers

<button class="icon icon-close"></button>
<button class="icon icon-arrow-left"></button>
<button class="icon icon-arrow-left"></button>
<button class="icon icon-arrow-up"></button>
<button class="icon icon-arrow-down"></button>
<button class="icon icon-minus"></button>
<button class="icon icon-plus"></button>
<button class="icon icon-zoom"></button>
<button class="icon icon-info"></button>
<button class="icon icon-search"></button>

Gradients

.gradient-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet earum voluptates ullam maxime quas esse, voluptate explicabo optio debitis, aperiam perspiciatis possimus officia placeat vero. Doloribus at enim expedita unde?

<section class="section gradient">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet earum voluptates ullam maxime quas esse, voluptate explicabo
    optio debitis, aperiam perspiciatis possimus officia placeat vero. Doloribus at enim expedita unde?</p>
</section>

Buttons

Button

.btn- Behold the button.

<a href="#" title="" class="btn">A button</a>

Pagination

Pagination

.pagination

<div class="pagination">
  <a href="#" class="prev">Prev</a>
  <a href="#" class="next">Next</a>
</div>

Forms

Forms

.form

<form class="form">
  <span>
    <input type="text" placeholder="First Name">
  </span>
  <span>
    <select>
      <option value="">Please Choose An Option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  </span>
  <span>
    <input type="submit" value="Submit">
  </span>
</form>

Hero Banner

Hero

.hero-

Full Width Hero Banner

Lorem ipsum dolor sit amet skdjfnj sasjd iein kacxnionsdcib scjashuedb asx.
<div class="hero" style="background-image: url(http://biocats.localhost/wp-content/themes/biocats/images/biocats-hero-temp.jpg)">
  <h1>Full Width Hero Banner</h1>
  <span>Lorem ipsum dolor sit amet skdjfnj sasjd iein kacxnionsdcib scjashuedb asx.</span>
</div>

.modal

Please see the readme file for more information about the modal

Click here
<article class="grid grid--full" ui-modal-pane="true">
  <section class="section gradient">
    <div class="pod" ui-modal-exploder="true">
      <p>Please see the readme file for more information about the modal</p>
      <a href="#" ui-modal-target="test-modal">Click here</a>
    </div>
    <div class="modal-content" ui-modal="test-modal">
      <p>The modal content goes here</p>
    </div>
  </section>
  <div id="modal" class="modal">
    <button class="modal__close icon icon-close"></button>
    <div id="modal__body" class="modal__body">
    </div>
  </div>
</article>

.nav- Main navigation used in site header

<nav class="nav">
  <ul>
    <li>
      <a href="#" title="" class="active">Nav Item</a>
    </li>
    <li>
      <a href="#" title="" class="">A Longer Nav Item</a>
    </li>
    <li>
      <a href="#" title="" class="">Nav Item</a>
      <ul>
        <li>
          <a href="#" title="" class="">Nav Item</a>
        </li>
        <li>
          <a href="#" title="" class="">Nav Item Two</a>
        </li>
        <li>
          <a href="#" title="" class="">Nav Item Three</a>
        </li>
        <li>
          <a href="#" title="" class="">Nav Item Four More</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#" title="" class="">Nav Item</a>
    </li>
    <li>
      <a href="#" title="" class="">Nav Item</a>
    </li>
    <li>
      <a href="#" title="" class="">Nav Item</a>
    </li>
  </ul>

.sub-nav- Sub navigation used below hero banners

<div class="sub-nav">
  <ul>
    <li>
      <a href="#" title="" class="active">Sub Nav Item</a>
    </li>
    <li>
      <a href="#" title="" class="">A Longer Sub Nav Item</a>
    </li>
    <li>
      <a href="#" title="" class="">Short Item</a>
    </li>
  </ul>
</div>

Pagination

Pagination

.pagination

<section class="section gradient">
  <div class="pagination">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
  </div>
</section>

Pods

Pods

.pod

<div class="pod"></div>

Section

Section

.Section

This is a section with padding - Add a class of 'section--no-padding' for no padding.
<section class="section section--grey">This is a section with padding - Add a class of 'section--no-padding' for no padding.</section>

Social Icons

Social Icon

.social-icon-

<section class="section section--grey">
  <a class="social-icon icon icon-facebook"></a>
  <a class="social-icon icon icon-twitter"></a>
  <a class="social-icon icon icon-linkedin"></a>
</section>

Tiles

Tile

.tile-

Global Customised Enzymee Development & Manufacture

Biocatalysts develop and manufacture speciality enzymes from small to large scale quantities. We are the only company offering a full service from enzyme discovery to global shipment of regulatory compliant enzymes.

More About Us

Enzyme Products

Choose from our extensive portfolio of existing enzymes products.

View Products

News

Biocatalysts Published Yeast Extraction Technical Bulletin

View all news

Events

  • EFIB
  • Food Ingredients Europe
  • IFT 16 Annual Meeting & Food Expo
View all events

Why Choose Biocatalysts?

Enzymes speed up chemical reactions in a natural way and are essential to the food processing industry. There are many benefits that can be provided by the useof enzymes!

Find out More
<article class="grid grid--full" ui-modal-pane="true">
  <div class="grid__item teen--two-thirds">
    <section class="tile tile--landscape tile--bg" style="background-image: url(http://biocats.localhost/wp-content/uploads/2015/10/introduction-banner1.jpg)">
      <div class="tile__inner">
        <div class="tile__content">
          <h1>Global Customised Enzymee Development &amp; Manufacture</h1>
          <p>Biocatalysts develop and manufacture speciality enzymes from small to large scale quantities. We are the only company
            offering a full service from enzyme discovery to global shipment of regulatory compliant enzymes.</p>
          <a href="http://biocats.localhost/enzyme-development-manufacture/" title="" class="btn">More About Us</a>
        </div>
      </div>
    </section>
  </div>
  <div class="grid__item teen--one-third">
    <section class="tile tile--square tile--bg" style="background-image: url(http://biocats.localhost/wp-content/uploads/2015/10/products-banner.jpg)">
      <div class="tile__inner">
        <div class="tile__content">
          <h2>Enzyme Products</h2>
          <p>Choose from our extensive portfolio of existing enzymes products.</p>
          <a href="http://biocats.localhost/products/" title="" class="btn">View Products</a>
        </div>
      </div>
    </section>
  </div>
  <!--
   -->
  <div class="grid__item teen--one-third">
    <section class="tile tile--square tile--bg tile--no-padding">
      <div class="tile__inner tile__inner--stacked">
        <div class="pod pod--peak pod--rev">
          <div class="pod__content">
            <h4>News</h4>
            <p>Biocatalysts Published Yeast Extraction Technical Bulletin</p>
            <a href="http://biocats.localhost/news/">View all news</a>
          </div>
          <div class="pod__image" style="background-image: url({);"></div>
        </div>
        <div class="pod pod--peak">
          <div class="pod__image" style="background-image: url({);"></div>
          <div class="pod__content">
            <h4>Events</h4>
            <ul>
              <li>EFIB</li>
              <li>Food Ingredients Europe</li>
              <li>IFT 16 Annual Meeting &amp; Food Expo</li>
            </ul>
            <a href="http://biocats.localhost/events/">View all events</a>
          </div>
        </div>
        <!-- .pod -->
      </div>
    </section>
  </div>
  <!--
   -->
  <div class="grid__item teen--one-third">
    <section class="tile tile--square tile--bg" style="background-image: url(http://biocats.localhost/wp-content/uploads/2015/10/about-banner.jpg)">
      <div class="tile__inner">
        <div class="tile__content">
          <h2>Why Choose Biocatalysts?</h2>
          <p>Enzymes speed up chemical reactions in a natural way and are essential to the food processing industry. There are
            many benefits that can be provided by the useof enzymes!</p>
          <a href="http://biocats.localhost/why-choose-biocatalysts/" title="" class="btn">Find out More</a>
        </div>
      </div>
    </section>
  </div>
  <!--

   -->
  <div class="grid__item teen--one-third bg--white" ui-modal-exploder="true">
    <section class="tile tile--square tile--bg" style="background-image: url(http://biocats.localhost/wp-content/uploads/2015/10/video-still.jpg)">
      <div class="tile__inner">
        <a href="#" title="" ui-modal-target="introduction-video" class="tile__content">
          <span class="btn btn--play">
            <span class="icon icon-play"></span>
            <span>
            </span>
          </span>
        </a>
      </div>
    </section>
    <div class="modal-content" ui-modal="introduction-video">
      <div class="video">
        <div class="video__player">
          <iframe id="ytplayer" type="text/html" width="100%" height="100%" src="https://www.youtube.com/embed/JNZIeEG7nYw" frameborder="0"></iframe>
        </div>
      </div>
    </div>
  </div>

  <div id="modal" class="modal">
    <button class="modal__close icon icon-close"></button>
    <div id="modal__body" class="modal__body">
    </div>
  </div>
</article>