A general layout of what a ui story should look like inside a webapp

story-template.html

<!-- a story is an item that exists in a list that leads into its own.  An active story is one that is meant to be interacted with, whereas an inactive story is just for display -->
<article class="story [storyObjectType] [in]active" href="[storyController]/view/[storyId]">
	<!-- Optional: Appropriate avatar item for story (user photo, task time etc.) the thing that identifies the story in a quick glance -->
	<div class="story-avatar">
		<!-- img or time or div or span -->
	</div>

	<div class="story-content">	
		<div class="story-content-wrapper">	
			<header class="story-content-header">
				<!-- Story summary or title.  May contain other inline tags (such as time, strong, em). May be of length 1 to n -->
				<h1 class="story-title">[This is my story of how I fought the big bad wolf.]</h1>
				
				<!-- Optional: Secondary information that is less important that the title, but still key to the story.
					May contain other tags.	-->
				<h2 class="story-subtitle">[It's a bad idea to fight a wolf.]</h2>
			</header>
			
			<!-- Optional: div Details of the story, may contain any type of content -->
			<div class="story-details">
				<!-- any type of content can go here. -->
				[<p>Once upon a time there was a big bad wolf</p>
				<p>I punched it in the face and it left me alone</p>
				<p>The end.</p>]
			</div>
			
			<!-- Optional: Any actions the user can take related to the story.  Only highest-priority actions should
				be displayed as each button takes up a significant amount of space.  Mostly, these will be ajax buttons 
				or links.  Any text in these <li> items should be minimal enough to fit nicely within a 44px width container -->
			<div class="story-controls">
				<ul>
					<li>
						[<a id="[descriptive]-tool" href="[controller/ajaxAction]">Delete</a>
					</li>
					<li>
						[<form>...<button/></form>]
					</li>
					<li>
						[<a class="time created"><span>[Sunday, August 21, at 7:31 pm]</span></a>]
					<li>
				</ul>
			</div>
		</div>
	</div>
	
</article>

Items in square brackets indicated examples rather than hard syntax