Accessibility Tool

Stacked

This feature has a heading, a container with an image wrapped in a link, and a container 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 stacked">
	<div class="feature clearfix">
	  <h2>Feature Title</h2> 
		<div class="image">
			<a href="">
				<img src="theme/features/feature1.jpg" alt="" />
			</a>
		</div>
		<div class="text">
			 <!-- Rich text. This is the ONLY area where text elements may be added/edited. --> 
			<p>Feature content</p>
			<!-- End rich text -->
			<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 -->

Default Styling

Feature Title

placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere, nisl nec egestas facilisis, orci orci sodales sem, ac bibendum nulla elit ut libero. Nullam dictum mollis iaculis.

Read more

Feature Title

placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere, nisl nec egestas facilisis, orci orci sodales sem, ac bibendum nulla elit ut libero. Nullam dictum mollis iaculis.

Read more

Feature Title

placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere, nisl nec egestas facilisis, orci orci sodales sem, ac bibendum nulla elit ut libero. Nullam dictum mollis iaculis.

Read more

Custom Styling Example

Feature Title

slide2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum posuere, nisl nec egestas facilisis, orci orci sodales sem, ac bibendum nulla elit ut libero. Nullam dictum mollis iaculis.

Read more

Custom Styling Example

Feature Title

slide1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque laoreet sapien molestie consectetur. Mauris purus odio, auctor suscipit elit non, vulputate egestas enim. Etiam faucibus odio eu nunc condimentum.

Ut porttitor quam et consequat aliquet. Nulla facilisi. Nullam vitae magna maximus, molestie augue quis, porta ipsum. In egestas leo sit amet laoreet pulvinar. Nunc rhoncus mauris a porta molestie. Etiam mollis magna augue, vel gravida ipsum mattis vitae.

Read more

2024 © All Rights Reserved | Website Design By: Televox | Login