Product
Finder
×

Please note, selection of items may vary from store to store in your area. Call ahead to confirm that the product you are looking for is in the store near you.

Search Results from

Oregon Fruit Products: Styleguide & Code Reference

Wrapping Markup in Blank Page

You will want to use the code below first, before adding any content within it for static pages. This isn't needed for template specific pages such as the Homepage, Landing, or Product/Recipe specific pages.

<div class="container content-wrap default-content">
  Your additional markup for the page will go here...
</div>

Headings

<h1>Headline</h1>
<h2>Headline</h2>
<h3>Headline</h3>

Standard Elements

Regular paragraphs should be wrapped in <p> tags

<p>This is how a regular paragraph should look.</p>

Links

Relative, in the current window:

<a href="/specialty-fruit-products/category/berries/blueberries" >Blueberries</a>

Absolute, in a new window:

<a href="http://www.google.com" target="_blank">Google</a>

Anchor Tags

To create the anchor you want to link to:

<a name="anchor_name"></a>

(Anchors in sliders will use the "id" attribute instead of the "name" attibute, but you link to them in the same way.)

To link to an anchor in the same page:

<a href="#anchor_name" >Link to Anchor</a>

To link to an anchor in a different page:

<a href="/page-name#anchor_name" >Link to Anchor</a>

Bulleted List

<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>

Numbered List

  1. List Item
  2. List Item
  3. List Item
<ol>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>

Product Detail Tabs

The unassuming tart cherry has a very long history of offering an entire range of natural health advantages to anyone interested in enjoying a more active and healthy lifestyle. In fact the tart cherry has been around since the beginning of time and has traveled across the world. Over the centuries is has made its way Asia to Europe and finally brought to the New World by the first settlers in 1600’s. Upon its arrival in the New World, the cherry spread throughout the country. Over the centuries, it made its way from the east coast to the west coast. It ultimately planted roots among many of the states of the 45th parallel. The reason is the favorable weather patterns in these specific areas. Main cherry growing states include New york, Utah, Washington, Wisconsin and Michigan.
Oregon has a small amount of cherries in production, but the bulk of U.S. cherries come from Michigan.
Although they prefer mild, dry climates, tart cherries grow well throughout much of the United States. They need about 1,000 chill hours below 45°F in winter. This limits their range to the Carolinas and northward through Zone 4. Although all cherries need well-drained soils, tart cherries tolerate moderately heavy soils better than sweet cherries.
Tart cherries have a reasonably short harvest season, from mid-June to mid-July.
<div class="product-detail-tabs">
  <ul>
    <li>
      <a href="#origin">
        <img src="/assets/img/tab_origin.png" alt="Tab Icon">
        Origin
      </a>
    </li>
    <li>
      <a href="#region">
        <img src="/assets/img/tab_region.png" alt="Tab Icon">
        Region
      </a>
    </li>
    <li>
      <a href="#climate">
        <img src="/assets/img/tab_climate.png" alt="Tab Icon">
        Climate
      </a>
    </li>
    <li>
      <a href="#harvest">
        <img src="/assets/img/tab_harvest.png" alt="Tab Icon">
        Harvest
      </a>
    </li>
  </ul>
  <div id="origin">The unassuming tart cherry has a very long history of offering an entire range of natural health advantages to anyone interested in enjoying a more active and healthy lifestyle. In fact the tart cherry has been around since the beginning of time and has traveled across the world. Over the centuries is has made its way Asia to Europe and finally brought to the New World by the first settlers in 1600’s. Upon its arrival in the New World, the cherry spread throughout the country. Over the centuries, it made its way from the east coast to the west coast. It ultimately planted roots among many of the states of the 45th parallel. The reason is the favorable weather patterns in these specific areas. Main cherry growing states include New york, Utah, Washington, Wisconsin and Michigan. </div>
  <div id="region">Oregon has a small amount of cherries in production, but the bulk of U.S. cherries come from Michigan.  </div>
  <div id="climate">Although they prefer mild, dry climates, tart cherries grow well throughout much of the United States. They need about 1,000 chill hours below 45°F in winter. This limits their range to the Carolinas and northward through Zone 4. Although all cherries need well-drained soils, tart cherries tolerate moderately heavy soils better than sweet cherries. </div>
  <div id="harvest">Tart cherries have a reasonably short harvest season, from mid-June to mid-July.</div>
</div>

Whole Page Experiences

Feature Slider (Homepage)

<div class="feature-slider">

  <div class="feature-slider__nav">
    <span class="scroll-down">Scroll <br>Down</span>
    <ul>
      <li><a data-img="/images/uploads/slide_346x206.jpg" data-copy="1 Lorem ipsum headline" href="#slide1"><img src="/images/uploads/slide_29x29.jpg" alt="Slide 1"></a></li>
      <li><a data-img="/images/uploads/346x206.gif" data-copy="2 Lorem ipsum headline Title Dolor Amut Sit" href="#slide2"><img src="/images/uploads/29x29.gif" alt="Slide 2"></a></li>
      <li><a data-img="/images/uploads/desserts_346x206.jpg" data-copy="What's For Dessert?" href="#slide3"><img src="/images/uploads/desserts_29x29.jpg" alt="Slide 3"></a></li>
      <li><a data-img="/images/uploads/dinner_346x206.jpg" data-copy="Fruit: It's What's For Dinner" href="#slide4"><img src="/images/uploads/dinner_29x29.jpg" alt="Slide 3"></a></li>
    </ul>
    <span class="nav-bottom"></span>

    <div class="nav-flyout">
      <span class="flyout-top"></span>
      <div class="flyout-content">
        <img src="" alt="Feature Preview">
        <div class="flyout-overlay"></div>
      </div>
      <span class="flyout-bottom"></span>
    </div>
  </div>

  <section 
    id="slide1" 
    class="feature-slider__slide" 
    data-title="1 Lorem ipsum headline for this image goes here amit dolor" 
    data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Browse Products" 
    data-button-href="/link-1" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/assets/img/slide.jpg" alt="">
    </div>
  </section>

  <section 
    id="slide2" 
    class="feature-slider__slide" 
    data-title="2 Lorem ipsum headline for this image goes here amit dolor" data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Call To Action 2" 
    data-button-href="/link-2" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/1340x1020.gif" alt="">
    </div>
  </section>

  <section 
    id="slide3" 
    class="feature-slider__slide" 
    data-title="What's For Dessert?" 
    data-description="Our all-natural ingredients make some of the world's yummiest deserts. With these recipes, you can too!" 
    data-href="#" 
    data-button="View Desserts" 
    data-button-href="/recipes-and-inspiration/category/desserts"Action 4" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/deserts_1340x1020.jpg" alt="">
    </div>
  </section>

  <section 
    id="slide4" 
    class="feature-slider__slide" 
    data-title="Fruit: It's What's For Dinner" data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Call To Action 4" 
    data-button-href="/link-4" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/dinner_1340x1020.jpg" alt="">
    </div>
  </section>

  <div class="feature-slider__footer">

  <a href="#" class="feature-slider__title"><span></span><i class="icon-caret-right"></i></a>

  <div class="inner-footer">

    <span class="feature-slider__caption"></span>

    <div class="feature-slider__arrows">
      <span class="arrow-up"></span>
      <span class="arrow-down"></span>
    </div>

    <div class="feature-slider__description">
      <span class="copy"></span>
      <a href="#" class="button">Browse Products</a>
    </div>

    <span class="footer-berries-left"></span>

    <a href="#" class="footer-can-one">
      <span class="tooltip"><i class="icon-plus">+</i> Product <br>Info</span>
    </a>

    <a href="#" class="footer-can-two">
      <span class="tooltip"><i class="icon-plus">+</i> Product <br>Info</span>
    </a>

    <a href="#" class="footer-can-three">
      <span class="tooltip"><i class="icon-plus">+</i> Product <br>Info</span>
    </a>

  </div>

  </div>

</div>

Landing with Intro Blocks & Feature Slider (3 blocks)

<div class="feature-intro content-wrap">

  <div class="feature-intro__one-third">
    <a href="/recipes-and-inspiration/category/desserts">
    <img src="/assets/img/feature_intro_1.jpg" alt="Featured Intro Image">
    <div class="feature-intro__overlay">
      <h2 class="overlay-title">Desserts</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna. </p>
      <div class="overlay-button"><span>View Recipes</span></div>
    </div>
    </a>
  </div>

  <div class="feature-intro__one-third">
    <a href="/recipes-and-inspiration/category/drinks">
    <img src="/assets/img/feature_intro_2.jpg" alt="Featured Intro Image">
    <div class="feature-intro__overlay">
      <h2 class="overlay-title">Drinks</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna. </p>
      <div class="overlay-button"><span>View Recipes</span></div>
    </div>
    </a>
  </div>

  <div class="feature-intro__one-third last">
    <a href="/recipes-and-inspiration/category/dishes">
    <img src="/assets/img/feature_intro_3.jpg" alt="Featured Intro Image">
    <div class="feature-intro__overlay">
      <h2 class="overlay-title">Dishes</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna. </p>
      <div class="overlay-button"><span>View Recipes</span></div>
    </div>
    </a>
  </div>

</div>

<div class="feature-slider">

  <div class="feature-slider__nav">
    <span class="scroll-down">Scroll <br>Down</span>
    <ul>
      <li><a data-img="/images/uploads/slide_346x206.jpg" data-copy="1 Lorem ipsum headline" href="#slide1"><img src="/images/uploads/slide_29x29.jpg" alt="Slide 1"></a></li>
      <li><a data-img="/images/uploads/346x206.gif" data-copy="2 Lorem ipsum headline Title Dolor Amut Sit" href="#slide2"><img src="/images/uploads/29x29.gif" alt="Slide 2"></a></li>
      <li><a data-img="/images/uploads/desserts_346x206.jpg" data-copy="What's For Dessert?" href="#slide3"><img src="/images/uploads/desserts_29x29.jpg" alt="Slide 3"></a></li>
      <li><a data-img="/images/uploads/dinner_346x206.jpg" data-copy="Fruit: It's What's For Dinner" href="#slide4"><img src="/images/uploads/dinner_29x29.jpg" alt="Slide 4"></a></li>
    </ul>
    <span class="nav-bottom"></span>

    <div class="nav-flyout">
      <span class="flyout-top"></span>
      <div class="flyout-content">
        <img src="" alt="Feature Preview">
        <div class="flyout-overlay"></div>
      </div>
      <span class="flyout-bottom"></span>
    </div>
  </div>

  <div class="feature-slider__overlay">
    <h1 class="overlay-title">Featured Seasonal Recipes</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <span class="overlay-button">Seasonal Recipes</span>
    <span class="icon-caret-down"></span>
  </div>

  <section 
    id="slide1" 
    class="feature-slider__slide" 
    data-title="1 Lorem ipsum headline for this image goes here amit dolor" 
    data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Browse Products" 
    data-button-href="/link-1" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/assets/img/slide.jpg" alt="">
    </div>
  </section>

  <section 
    id="slide2" 
    class="feature-slider__slide" 
    data-title="2 Lorem ipsum headline for this image goes here amit dolor" data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Call To Action 2" 
    data-button-href="/link-2" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/1340x1020.gif" alt="">
    </div>
  </section>

  <section 
    id="slide3" 
    class="feature-slider__slide" 
    data-title="What's For Dessert?" 
    data-description="Our all-natural ingredients make some of the world's yummiest deserts. With these recipes, you can too!" 
    data-href="#" 
    data-button="View Desserts" 
    data-button-href="/recipes-and-inspiration/category/desserts" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/deserts_1340x1020.jpg" alt="">
    </div>
  </section>

  <section 
    id="slide4" 
    class="feature-slider__slide" 
    data-title="Fruit: It's What's For Dinner" data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Call To Action 4" 
    data-button-href="/link-4" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/dinner_1340x1020.jpg" alt="">
    </div>
  </section>

  <div class="feature-slider__footer">

    <a href="mailto:cooking@oregonfruit.com?Subject=Recipe Submission" class="submit-recipe-button">Submit A Recipe</a>

    <a href="#" class="feature-slider__title"><span></span><i class="icon-caret-right"></i></a>

    <div class="inner-footer">

      <span class="feature-slider__caption"></span>

      <div class="feature-slider__arrows">
        <span class="arrow-up"></span>
        <span class="arrow-down"></span>
      </div>

      <div class="feature-slider__description">
        <span class="copy"></span>
        <a href="#" class="button">Browse Products</a>
      </div>

      <span class="footer-berries-left"></span>

      <span href="#" class="footer-berries-one">
      </span>

      <span href="#" class="footer-berries-two">
      </span>

      <span href="#" class="footer-berries-three">
      </span>

    </div>

  </div>

</div>

Landing with Intro Blocks & Feature Slider (2 blocks)

<div class="feature-intro content-wrap">

  <div class="feature-intro__one-half">
    <a href="/recipes-and-inspiration/category/desserts">
    <img src="/assets/img/feature_intro_half_1.jpg" alt="Featured Intro Image">
    <div class="feature-intro__overlay">
      <h2 class="overlay-title">Desserts</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna. </p>
      <div class="overlay-button"><span>View Recipes</span></div>
    </div>
    </a>
  </div>

  <div class="feature-intro__one-half last">
    <a href="/recipes-and-inspiration/category/dishes">
    <img src="/assets/img/feature_intro_half_2.jpg" alt="Featured Intro Image">
    <div class="feature-intro__overlay">
      <h2 class="overlay-title">Dishes</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna. </p>
      <div class="overlay-button"><span>View Recipes</span></div>
    </div>
    </a>
  </div>

</div>

<div class="feature-slider">

  <div class="feature-slider__nav">
    <span class="scroll-down">Scroll <br>Down</span>
    <ul>
      <li><a data-img="/images/uploads/slide_346x206.jpg" data-copy="1 Lorem ipsum headline" href="#slide1"><img src="/images/uploads/slide_29x29.jpg" alt="Slide 1"></a></li>
      <li><a data-img="/images/uploads/346x206.gif" data-copy="2 Lorem ipsum headline Title Dolor Amut Sit" href="#slide2"><img src="/images/uploads/29x29.gif" alt="Slide 2"></a></li>
      <li><a data-img="/images/uploads/desserts_346x206.jpg" data-copy="What's For Dessert?" href="#slide3"><img src="/images/uploads/desserts_29x29.jpg" alt="Slide 3"></a></li>
      <li><a data-img="/images/uploads/dinner_346x206.jpg" data-copy="Fruit: It's What's For Dinner" href="#slide4"><img src="/images/uploads/dinner_29x29.jpg" alt="Slide 4"></a></li>
    </ul>
    <span class="nav-bottom"></span>

    <div class="nav-flyout">
      <span class="flyout-top"></span>
      <div class="flyout-content">
        <img src="" alt="Feature Preview">
        <div class="flyout-overlay"></div>
      </div>
      <span class="flyout-bottom"></span>
    </div>
  </div>

  <div class="feature-slider__overlay">
    <h1 class="overlay-title">Featured Seasonal Recipes</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <span class="overlay-button">Seasonal Recipes</span>
    <span class="icon-caret-down"></span>
  </div>

  <section 
    id="slide1" 
    class="feature-slider__slide" 
    data-title="1 Lorem ipsum headline for this image goes here amit dolor" 
    data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Browse Products" 
    data-button-href="/link-1" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/assets/img/slide.jpg" alt="">
    </div>
  </section>

  <section 
    id="slide2" 
    class="feature-slider__slide" 
    data-title="2 Lorem ipsum headline for this image goes here amit dolor" data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Call To Action 2" 
    data-button-href="/link-2" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/1340x1020.gif" alt="">
    </div>
  </section>

  <section 
    id="slide3" 
    class="feature-slider__slide" 
    data-title="What's For Dessert?" 
    data-description="Our all-natural ingredients make some of the world's yummiest deserts. With these recipes, you can too!" 
    data-href="#" 
    data-button="View Desserts" 
    data-button-href="/recipes-and-inspiration/category/desserts" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/deserts_1340x1020.jpg" alt="">
    </div>
  </section>

  <section 
    id="slide4" 
    class="feature-slider__slide" 
    data-title="Fruit: It's What's For Dinner" data-description="Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis lacus vel augue.Vivamus sagittis" 
    data-href="#" 
    data-button="Call To Action 4" 
    data-button-href="/link-4" 
    data-caption=""
  >
    <div class="slide-image">
      <div class="slide-image__texture"></div>
      <img src="/images/uploads/dinner_1340x1020.jpg" alt="">
    </div>
  </section>

  <div class="feature-slider__footer">

    <a href="mailto:cooking@oregonfruit.com?Subject=Recipe Submission" class="submit-recipe-button">Submit A Recipe</a>

    <a href="#" class="feature-slider__title"><span></span><i class="icon-caret-right"></i></a>

    <div class="inner-footer">

      <span class="feature-slider__caption"></span>

      <div class="feature-slider__arrows">
        <span class="arrow-up"></span>
        <span class="arrow-down"></span>
      </div>

      <div class="feature-slider__description">
        <span class="copy"></span>
        <a href="#" class="button">Browse Products</a>
      </div>

      <span class="footer-berries-left"></span>

      <span href="#" class="footer-berries-one">
      </span>

      <span href="#" class="footer-berries-two">
      </span>

      <span href="#" class="footer-berries-three">
      </span>

    </div>

  </div>

</div>