Accessibility Tool

Large Main

This render template displays three news items representing the latest articles of a specified set of pages. The main container is divided into two sections: one "main" article (the most recent) and two "secondary" articles. Each news item is wrapped in a link tag and contains a title, featured image, published date, summary, 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="largeMain row">
	<a href="" class="newsItem main">
		<div class="inside">
				<div class="image">
					<div class="inside">
						<img src="theme/news/news1.jpg" alt="" />
					</div>
				</div>
			</div>
			<div class="newsContent">
				<div class="inside-padding">
					<div>
						<h3>Article Title</h3>
					</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<span>
					</div>
				</div>
			</div>
		</div>
	</a>
	<div class="secondaryNewsItems">
		<div class="inside">
			<a href="" class="newsItem secondary">
				<div class="image">
					<div class="inside">
						<img src="theme/news/news2.jpg" alt="" />
					</div>
				</div>
				<div class="newsContent">
					<div>
						<div class="newsTitle">
							<h3>Article Title</h3>
						</div>
						<div class="newsDate">
						<div class="date">
								<span>20 December 2017</span>
						</div>
						</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>
		</a>
		<!-- End secondary -->
		<!-- Copy/paste a.secondary and contents for more news items of the same type -->
	</div>
	</div>

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