<ul class="lotusCommentList">
	<li class="lotusCommentItem">
		<!-- article is an HTML5 element. Use div instead if you are using HTML4 -->
		<article class="lotusPost" role="article">
			<div class="lotusPostAuthorInfo">
				<div class="lotusPostAvatar">
					<!-- replace the blank.gif with the URL to the server for person pictures -->
					<img class="yourProductSprite yourProductSprite-NoPhotoPerson32" alt="" src="../../css/images/blank.gif"/></div>
			</div><!--end author info-->
			<div class="lotusPostContent">
				<div class="lotusMeta"><a class="lotusPerson" href="javascript:;">Samantha Daryn</a> 10:04 AM</div>
				<div class="lotusPostDetails">
					<p>Hover over this comment to reveal the actions that you can take on it. The UI for each action is presented in subsequent comments in this list.</p>
				</div>
				<div class="lotusPostMore"><ul class="lotusInlinelist lotusActions"><li class="lotusFirst"><a href="javascript:;" role="button">Edit</a></li><li><a href="javascript:;" role="button">Delete</a></li><li><a href="javascript:;" role="button">Flag as Inappropriate</a></li></ul></div>
			</div><!--end postContent-->
		</article><!--end post-->
	</li>
	<li class="lotusCommentItem">
		<article class="lotusPost" role="article">
			<div class="lotusPostAuthorInfo">
				<div class="lotusPostAvatar">
					<!-- replace the blank.gif with the URL to the server for person pictures -->
					<img class="yourProductSprite yourProductSprite-NoPhotoPerson32" alt="" src="../../css/images/blank.gif"/></div>
			</div><!--end author info-->
			<div class="lotusPostContent">
				<div class="lotusMeta"><a class="lotusPerson" href="javascript:;">Samantha Daryn</a> 10:04 AM</div>
				<div class="lotusPostInlineActions">
				<form class="lotusForm2 lotusStreamUpdate">
					<div class="lotusFieldEmphasis"><textarea class="lotusText" id="edit" name="description" aria-label="Edit text">This is how a comment would look if the user chose the Edit action (hover over the first comment to see the actions).</textarea></div>
				<div class="lotusActions"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" role="button"><strong>Save</strong></a></li><li><a href="javascript:;" role="button">Cancel</a></li></ul></div>
				</form>
				</div>
			</div><!--end postContent-->
		</article><!--end post-->
	</li>
	<li class="lotusCommentItem">
		<article class="lotusPost" role="article">
			<div class="lotusPostAuthorInfo">
				<div class="lotusPostAvatar">
					<!-- replace the blank.gif with the URL to the server for person pictures -->
					<img class="yourProductSprite yourProductSprite-NoPhotoPerson32" alt="" src="../../css/images/blank.gif"/></div>
			</div><!--end author info-->
			<div class="lotusPostContent">
				<div class="lotusMeta"><a class="lotusPerson" href="javascript:;">Samantha Daryn</a> 10:04 AM</div>
				<div class="lotusPostDetails">
					<p>This is how a comment would look if the user chose the Delete action (hover over the first comment to see the actions). </p>
				</div>
				<div class="lotusPostInlineActions">
				<div class="lotusActionBox">
					<div class="lotusActionMessage">Are you sure you wish to delete this comment?</div>
					<div class="lotusActions"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" role="button">Delete</a></li><li><a href="javascript:;" role="button">Cancel</a></li></ul></div>
				</div>
			</div><!--end postContent-->
		</article><!--end post-->
	</li>
	<li class="lotusCommentItem">
		<article class="lotusPost" role="article">
			<div class="lotusPostAuthorInfo">
				<div class="lotusPostAvatar">
					<!-- replace the blank.gif with the URL to the server for person pictures -->
					<img class="yourProductSprite yourProductSprite-NoPhotoPerson32" alt="" src="../../css/images/blank.gif"/></div>
			</div><!--end author info-->
			<div class="lotusPostContent">
				<div class="lotusMeta"><a class="lotusPerson" href="javascript:;">Samantha Daryn</a> 10:04 AM</div>
				<div class="lotusPostDetails">
					<p>This is how a comment would look if the user chose the Flag as Inappropriate action (hover over the first comment to see the actions). </p>
				</div>
				<div class="lotusPostInlineActions">
				<form class="lotusForm2 lotusStreamUpdate">
					<label for="flag">Flag as Inappropriate:</label>
					<div class="lotusFieldEmphasis"><textarea class="lotusText" id="flag" name="description" area-label="Please provide a reason for flagging this" placeholder="Please provide a reason for flagging this"></textarea></div>
				<div class="lotusActions"><ul class="lotusInlinelist"><li class="lotusFirst"><a href="javascript:;" role="button"><strong>Save</strong></a></li><li><a href="javascript:;" role="button">Cancel</a></li></ul></div>
				</form>
				</div>
			</div><!--end postContent-->
		</article><!--end post-->
	</li>
	<li class="lotusAddComment"><a class="lotusCommentInput" href="javascript:;" role="button">Write another comment...</a></li>
</ul>