Menu
Accessibility Tool

This tool uses cookies, click confirm below to use this tool

Confirm

PressShift + a to open/close this menu

Grayscale
Contrast
Invert Colors
Invert
Cursor Size
Cursor
Font Size
Reset Accessibility Options

Divided

This render template displays four news items representing the latest articles of a specified set of pages. Each news item has two containers (all wrapped in a link). One contains an image and the other contains a title, 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="divided">
	<div class="newsList">
		<a href="" class="newsItem">
			<div class="inside">
				<div class="image">
					<div class="inside">
						<img src="theme/news/news1.jpg" alt="" />
					</div>
				</div>
				<div class="text">
					<div class="newsTitle">
						<h3>Article Title</h3>
					</div>
					<div class="newsContent">
						<div>
							<div class="newsDate">
								<span>Dec 20</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>
			</div>
		</a><!-- End newsItem -->
		<!-- Copy/paste a.newsItem and contents for more news items of the same type -->
	</div>
</div><!-- End homeNewsWrapper -->

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