Accessibility Tool

Stacked

This render template displays three news items representing the latest articles of a specified set of pages. Each news item is wrapped in a link tag and contains a title, featured image, published date, summary (displays up to 200 characters followed by "..."), and "Read this article" box.

For a complete list of best practices, visit the main portlet page: News/Blog

HTML Structure


<div id="homeNewsWrapper" class="row stacked">
	<div class="newsList">
		<a href="" class="newsItem">
			<div class="inside">
				<div class="newsTitle">
					<h3>Article Title</h3>
				</div>
				<div class="image">
					<div class="inside">
						<img src="theme/news/news1.jpg" alt="" />
					</div>
				</div>
				<div class="newsContent">
					<div>
						<div class="newsDate">
							<span>20 December 2017</span>
						</div>
						<div class="newsSummary">
							<p>Short article summary...</p>
						</div>
						<div class="readMore">
							<span>Read this article</span>
							<span class="offscreen">Read more about (insert title here)</span>
						</div>
					</div>
				</div>
			</div>
		</a>
	</div>
</div>

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