aura_components/product/template.html

template.html

<div class="product">	
			<div class="small-1 columns">
			  	<a href="#" class="button minus" title="Remover">
					<span class="icon-minus"></span>
				</a>
			</div>
			<div class="small-10 columns">
				<div class="small-6 columns">
					<dl class="tabs" data-tab>
					  <dd class="active"><a href="#panel2-1">GLP</a></dd>
					  <dd><a href="#panel2-2">Vasilhame</a></dd>
					  <dd><a href="#panel2-3">Água</a></dd>
					</dl>
					<div class="tabs-content">
					  <div class="content active" id="panel2-1">
					  	<div class="small-12 columns">
					  		<ul>
					  			<li data-aura-component="item" data-aura-price="20" data-aura-item-id="1" data-aura-description="GLP 5KG" data-aura-image="img/gas_5.png" data-aura-title="5 kg" class="item"></li>
					  			<li data-aura-component="item" data-aura-price="30" data-aura-item-id="2" data-aura-description="GLP 8KG" data-aura-image="img/gas_8.png" data-aura-title="8 kg" class="item"></li>
					  			<li data-aura-component="item" data-aura-price="40" data-aura-item-id="3" data-aura-description="GLP 13KG" data-aura-image="img/gas_13.png" data-aura-title="13 kg" class="item"></li>
					  			<li data-aura-component="item" data-aura-price="50" data-aura-item-id="4" data-aura-description="GLP 20KG" data-aura-image="img/gas_20.png" data-aura-title="20 kg" class="item"></li>
					  			<li data-aura-component="item" data-aura-price="60" data-aura-item-id="5" data-aura-description="GLP 45KG" data-aura-image="img/gas_45.png" data-aura-title="45 kg" class="item"></li>
						    </ul>
					  	</div>
					    
					  </div>
					  <div class="content" id="panel2-2">
					    <p>Second panel content goes here...</p>
					  </div>
					  <div class="content" id="panel2-3">
					    <p>Third panel content goes here...</p>
					  </div>
					</div>
				</div>
				<div class="small-6 columns calculate">
					<div class="small-4 columns">
						<input type="number" placeholder="Quantidade" min="1" value="1" name="qty"/>
					</div>
					<div class="small-1 columns">
						<p class="operator">X</p>
					</div>
					<div class="small-3 columns">
						<input type="text" placeholder="Preço" name="price" />
					</div>
					<div class="small-1 columns">
						<p class="operator">=</p>
					</div>

					<div class="small-3 columns">
						<p class="subtotal"></p>
					</div>
				</div>
			</div>
			<div class="small-1 columns">
			  	<a href="#" class="button plus" title="Adicionar">
					<span class="icon-plus"></span>
				</a>
			</div>
</div>