Tile Pattern


The styling is in "ux-prototype/custom-bootstrap/css/scss/custom-bootstrap/pattern-tile-layout.scss"


Example

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position

Title Of this Tile can be really long
Price: $$$
SKU: ABC
Stock: ##


Position


How To Use

1. Everythign is in the class="tile-layout"

<div class="tile-layout">
All cards should be in here
</div>

2. Code for Each Card is in class="tile"

<div class="tile">
	<div>
		<span><i class="icon-gripper icon-gray"></i></span>

		<span class="icon-remove icon-gray"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i></span>
	</div>

	<div class="tile-image">
		<img src="../images/pattern-placeholder/placeholder_362x219.jpg" height="219px" width="362px"> 
	</div>

	<div class="tile-description">
		<p>Title Of this Tile can be really long <br>
		Price: $$$ <br>
		SKU: ABC <br>
		Stock: ## </p>
	</div>

	<div class="checkbox">
	    <label>
	      <input type="checkbox"> <a href="#"> Make Hero </a> </input>
	    </label>
	</div>

	<hr class="tile-hr">
	<div class="position">
		<p> Position </p>
		<div class="form-group">
			<span><i class="icon-backward icon-gray"></i></span>
			<span><input type="text" class="form-control tile-position" value="#"></span>
			<span><i class="icon-forward icon-gray"></i></span>

		</div>

	</div>

</div>

3. To create the tile layout, you would copy and paste these cards.