Merged

This feature has two containers: one with an image and a heading all wrapped in a link, another with a rich text area (paragraph by default) and a "Read More" link. Both links have the same destination.

For a complete list of best practices, visit the main portlet page: Features

HTML Structure


<div class="featureWrapper merged">
	<div class="feature">
		<a href="">
			<div class="image">
				<div class="insideImage">
					<img src="theme/features/feature1.jpg" alt="" />
				</div><!-- End insideImage -->
				<div class="featureTitle">
					<h3>Feature Title</h3>
				</div><!-- End featureTitle -->
			</div><!-- End image -->
		</a>
	<div class="text">
		<!-- Rich text. This is the ONLY area where text elements may be added/edited. --> 
		<p>Feature content</p>
		<a href="" class="more"> <!-- a.more link text is hard-coded as "Read more". For custom link text or additional links, add more <a> tags within the rich text area WITHOUT the class "more" -->
			<span>Read more</span>
		</a>
	</div>
</div><!-- End feature -->
<!-- Copy/paste div.feature and contents for more features of the same type -->
</div><!-- End featureWrapper -->