Merged

This render template displays four news items representing the latest articles of a specified set of pages. Each news item has an image container that contains an image and a header (all wrapped in a link) and a text container that contains the 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="merged">
	<div class="newsList">
		<div class="newsItem">
			<a href="">
				<div class="image">
					<div class="insideImage">
						<img src="theme/news/news1.jpg" alt="" />
					</div>
					<div class="newsTitle">
						<h3>Article Title</h3>
					</div>
				</div>
			</a>
			<div class="text">
				<div class="newsContent">
					<div class="newsDate">
						<span>20 December 2017</span>
					</div>
					<div class="newsSummary">
						<p>Short article summary...</p>
					</div>
					<a href="" class="more">
						<span>Read this article</span>
						<span class="offscreen">Read more about (insert title here)</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

Default Styling

Article Title 1

August 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh eros. Donec mattis dignissim leo, in posuere mauris imperdiet vel...

Read this articleRead more aboutArticle Title 1

Article Title 2

July 01

Suspendisse felis leo, semper eu varius eget, venenatis vitae nunc. Vivamus nunc velit, dignissim eget sagittis tristique...

Read this articleRead more aboutArticle Title 2

Article Title 3

June 01

Cras auctor, augue hendrerit elementum sollicitudin, diam justo elementum ligula, sit amet auctor est enim laoreet diam. Quisque eget...

Read this articleRead more aboutArticle Title 3

Custom Styling Example

Article Title 1

August 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh eros. Donec mattis dignissim leo, in posuere mauris imperdiet vel...

Read this articleRead more aboutArticle Title 1

Article Title 2

July 01

Suspendisse felis leo, semper eu varius eget, venenatis vitae nunc. Vivamus nunc velit, dignissim eget sagittis tristique...

Read this articleRead more aboutArticle Title 2

Article Title 3

June 01

Cras auctor, augue hendrerit elementum sollicitudin, diam justo elementum ligula, sit amet auctor est enim laoreet diam. Quisque eget...

Read this articleRead more aboutArticle Title 3

Custom Styling Example

Article Title 1

August 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget nibh eros. Donec mattis dignissim leo, in posuere mauris imperdiet vel...

Read this articleRead more aboutArticle Title 1

Article Title 2

July 01

Suspendisse felis leo, semper eu varius eget, venenatis vitae nunc. Vivamus nunc velit, dignissim eget sagittis tristique...

Read this articleRead more aboutArticle Title 2

Article Title 3

June 01

Cras auctor, augue hendrerit elementum sollicitudin, diam justo elementum ligula, sit amet auctor est enim laoreet diam. Quisque eget...

Read this articleRead more aboutArticle Title 3