Accessibility Tool

Divided

This feature has two containers: one with an image wrapped in a link, and another with a heading, 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 divided">
	<div class="feature">
		<div class="image">
			<a href="">
				<img src="theme/features/feature1.jpg" alt="" />
			</a>
		</div>
          
        <div class="text">
        	<h2>Feature Title</h2> 
            <!-- 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

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

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

placeholder

Feature Title

Slightly more detailed title text

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

Consectetur adipiscing elit pellentesque laoreet sapien molestie consectetur. Mauris purus odio, auctor suscipit elit non.

Read more
placeholder

Feature Title

Slightly more detailed title text

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

Consectetur adipiscing elit pellentesque laoreet sapien molestie consectetur. Mauris purus odio, auctor suscipit elit non.

Read more

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