Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
110 lines (108 sloc) 5.94 KB
---
layout: container-breadcrumb-tabs
title: Mezzanine Products
permalink: "/products/mezzanine/"
css-package: products
js-package: products
description: |-
96Boards mezzanine products let you expand your Consumer Edition or Enterprise
Edition 96Boards with new interfaces for IoT, industrial control, and other
embedded applications. The following mezzanine expansion boards are currently available.
Please take some time to review our [mezzanine guidelines](https://github.com/96boards/documentation/raw/master/mezzanine/files/mezzanine-design-guidelines.pdf) document for some helpful design guidelines and resources.
specification-logo: 96Boards-Logo_Partner-small.png
---
<div class="row">
<div class="col-md-8" class="description">
<p id="collection-description" markdown="1">
{{ page.description | markdownify }}
</p>
</div>
<div class="col-md-4">
<img id="collection-image" class="img-responsive center-block hidden-sm hidden-xs" src="{% asset_path '{{ page.specification-logo }}'%}" alt="96Boards logo small.">
</div>
</div>
<div class="btn-group">
<button id="compare-boards-btn" type="button" class="btn btn-default compare-boards-btn" data-toggle="dropdown"
data-toggle="tooltip" data-placement="top" title="You can compare the 96Boards that you are interested in by clicking the checkbox next to your selected products and then pressing this button.">
Compare 96Boards
</button>
</div>
<div id="compare-boards-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Compare selected 96Boards</h4>
</div>
<div class="modal-body">
<p>Select boards by clicking the checkbox next to each board and press the "Compare" button below to
compare your selected 96Boards!</p>
<ul class="boards-to-compare"></ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a id="compare-btn" class="btn btn-primary" href="/products/compare/">Compare</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="grid">
{% assign products_array = site.product | where: "product_specification", "mezzanine"%}
{% assign products_array = products_array | where: "archived", "false" %}
<div class="row">
{% for product in products_array %}
{% assign product-url = product.permalink | split: "/" %}
<div class="mix {{product.product_specification | downcase }} col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="col-item">
<div class="photo">
<a href="{{product.permalink}}">
{% capture image_path %}_product/{{product.product_specification}}/{{product-url[2]}}/images/{{ product.product_images[0]}}{% endcapture %}
{% capture full_path %}/product/{{product.product_specification}}/{{product-url[2]}}/images/{{ product.product_images[0]}}{% endcapture %}
{% responsive_image_block %}
template: _includes/thumb.html
path: {{ image_path }}
fullpath: {{ full_path }}
{% if product.title %}
title: {{ product.title}}
alt: {{ product.title }}
{% endif %}
{% endresponsive_image_block %}
</a>
</div>
<div class="info">
<div class="product-title col-md-12 text-center">
<a href="{{product.permalink}}">
<h5>{{ product.title }}</h5>
</a>
</div>
<div class="product-short-description">
{{ product.product_short_desc | slice: 0, 50 }}...
</div>
<div class="separator clear-left">
<div class="dropdown dropdown-container btn-group dropup btn-block" class="product-buy-dropdown">
<a href="{{ product.permalink }}" class="btn btn-primary btn-read-more">View Product</a>
<button type="button" class="btn btn-primary dropdown-toggle btn-buy" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Buy <i class="button-icon glyphicon glyphicon-shopping-cart"></i>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu buy-dropup-menu">
{% for buy_link in product.product_buy_links %}
<li><a href="{{ buy_link.link-url }}">{{ buy_link.link-title }}</a></li>
{% endfor %}
</ul>
<input type="checkbox" class="board-checkbox" data-board-specification="{{product.product_specification}}"
data-board-title="{{product.title}}" data-board="{{product.permalink | replace: "/product/", "" | replace: "/", ""}}">
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<button id="compare-boards-btn-2" type="button" class="btn btn-default compare-boards-btn" data-toggle="dropdown"
data-toggle="tooltip" data-placement="top" title="Compare your selected 96Boards">
Compare 96Boards
</button>