<!-- 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 -->
<a 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-info">
		<!-- Optional: When the story was told/created -->
		<time datetime="2008-02-14 12:33:00" class="created">[Sunday, August 21, at 7:31 pm]</time>
	</div>

	<div class="story-content">
		<!-- 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>

		<!-- 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>

	</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>
		</ul>
	</div>

</a>