recipe.html

<div class="recipe" data-sly-use.recipe="com.citytechinc.cq.bootcamp.components.content.Recipe">
	<div class="row">
		<div class="col-xs-12 col-md-4">
			<img src="${recipe.RecipeImage}" class="Image">
		</div>
		<div class="col-xs-12 col-md-8">
		<h2>${recipe.title}</h2>
			<div class="meta">
				<p>Author: ${recipe.user}</p>
				<p>Posted on: ${recipe.date} </p>
			</div>
			<p>${recipe.description @ context='html'}</p>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<h4>Ingredients</h4>
			<ul data-sly-list.ingredient="${recipe.ingredients}">
				<li>${ingredient}</li>
			</ul>
			<h4>Steps</h4>
			<table data-sly-list.step="${recipe.steps}">
				<tr><td><strong>Step ${stepList.count}</strong></td><td>${step}</td></tr>
			</table>
		</div>
	</div>
</div>