Accessibility Tool

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


Default Styling

placeholder

Feature Title

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

Read more
placeholder

Feature Title

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

Read more
placeholder

Feature Title

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

Read more

Custom Styling Example

guy

Feature Title

Integer Ornare Dui

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

Read more
guy

Feature Title

Duis Odio Metus

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

Read more
guy

Feature Title

Proin Mattis Nec Odio Convallis

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

Read more

Custom Styling Example

office

Feature Title

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

Read more

2020 © All Rights Reserved | Website Design By: Intrado | Login