Story Tiles

index.html

<div class="StoryTiles">
	<div class="Flex BorderBottom">
		<a href="#" class="FlexCell Cell-2 Tablet-2 BorderRight">
			<div class="SingleBorder">
				<div>
					<h2 class="h3">"I am very grateful that now, as an adult, I can educate others."</h2>
					<span class="FakeLink">Meet Connor Markwell</span>
				</div>
			</div>
			<img alt="Connor with a big grin" src="//www.envisionus.com/getattachment/60bcd654-b14a-4500-a339-f86a29d5979a/Connor-Markwell">
		</a>
		<a href="#" class="FlexCell Tablet-1">
			<div class="SingleBorder">
				<div>
					<h2 class="h3">"Patients were...really starting to adapt and change behavior."</h2>
					<span class="FakeLink">Read Rebecca Kammer's Story</span>
				</div>
			</div>
			<img alt="Dr. Rebecca Kammer with a large, warm smile" src="//www.envisionus.com/getattachment/555a4645-7196-4a78-8334-c928f7ea4978/Rebecca-Kammer">			
		</a>
	</div>
	<div class="Flex BorderBottom">
		<a href="#" class="FlexCell Tablet-1 BorderRight">
			<div class="SingleBorder">
				<div>
					<h2 class="h3">"Envision has been perfect for me."</h2>
					<span class="FakeLink">Meet Sandra Wilkinson</span>
				</div>
			</div>
			<img alt="Sandy hard at work at Envision Industries" src="//www.envisionus.com/getattachment/bb3e71c1-d554-49bb-b4b1-8bfba5289001/Sandra-Wilkinson">
		</a>
		<div class="FlexCell Cell-2 Tablet-2">
			<div class="Flex BorderBottom">
				<a href="#" class="FlexCell Tablet-1 BorderRight">
					<div class="SingleBorder">
						<div>
							<h2 class="h3">"The best thing about my job is the people, both my colleagues and our customers"</h2>
							<span class="FakeLink">Meet Regina Henderson</span>
						</div>
					</div>
					<img alt="Profile photo of Regina smiling at the camera" src="//www.envisionus.com/getattachment/abacfafb-eddd-41fc-a5b6-efd8bbdb3335/Regina-Henderson">
				</a>
				<a href="#" class="FlexCell Tablet-1">
					<div class="SingleBorder">
						<div>
							<h2 class="h3">"Now I have hope for the future."</h2>
							<span class="FakeLink">Meet Laura and Troy</span>
						</div>
					</div>
					<img alt="An employee at the Rehabilitation Center helping a woman" src="//www.envisionus.com/getattachment/249333c8-6f19-4ce1-8ac0-9a58a8392201/Laura-And-Troy">			
				</a>
			</div>
			<div class="Flex">
				<a href="#" class="FlexCell">
					<div class="SingleBorder">
						<div>
							<h2 class="h3">"The ECDC made me realize that anything is possible for her"</h2>
							<span class="FakeLink">Meet Dallas Fonken</span>
						</div>
					</div>
					<img alt="Dallas sitting on a little rocking chair reading a book with her mom." src="//www.envisionus.com/getattachment/d91664c3-33d6-4976-a3cd-7075fb6b1335/Dallas-Fonken">
				</a>
			</div>
		</div>
	</div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

story-tiles.markdown

Story Tiles

Showcase of stories in grid layout. Each story is a link and has a teaser image, plus a quote which is shown on hover.

A Pen by Andrew Mosby on CodePen.

License.