Editorial content with pullouts

Taxonomic name: L-EDITORIAL-CONTENT

CORE COMPONENT

v.3.0.0 - Updated 11/09/17.

Container for editorial content that allows for pullout sections (ie. blockquotes, cards and images).

Examples

Pullout left

Sed consectetur risus in velit consequat dictum. Quisque aliquet nisi quis ipsum condimentum, id hendrerit orci rhoncus. Curabitur ac pretium leo. Mauris sit amet ipsum ut risus scelerisque tincidunt. Praesent justo libero, tincidunt et elementum id, fringilla a elit. Nullam risus turpis, ullamcorper eu ante at, euismod mollis ligula. Maecenas dapibus ornare arcu, eget pellentesque nunc fringilla quis. In interdum efficitur turpis id luctus. Cras sit amet felis volutpat, porta turpis ut, dapibus eros. Aenean a vehicula lacus. Proin tempus purus nec sem placerat, sit amet blandit nunc feugiat.

Nulla convallis velit vel auctor ultrices. Proin aliquet ligula in tempus dignissim.

Mauris in dui aliquam

Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus. Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus. Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus

Pullout right

Sed consectetur risus in velit consequat dictum. Quisque aliquet nisi quis ipsum condimentum, id hendrerit orci rhoncus. Curabitur ac pretium leo. Mauris sit amet ipsum ut risus scelerisque tincidunt. Praesent justo libero, tincidunt et elementum id, fringilla a elit. Nullam risus turpis, ullamcorper eu ante at, euismod mollis ligula. Maecenas dapibus ornare arcu, eget pellentesque nunc fringilla quis. In interdum efficitur turpis id luctus. Cras sit amet felis volutpat, porta turpis ut, dapibus eros. Aenean a vehicula lacus. Proin tempus purus nec sem placerat, sit amet blandit nunc feugiat.

Info line if required

PDF (x.xMB)

Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus. Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus. Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus

Notes for developers

The editorial content container with pullouts should only be used in full width areas.

Pullouts should be used only in conjunction with blockquotes, cards and images.

Notes for testers

  • The pullout effect should only show at desktop; at smaller sizes, the content should remain within the standard content flow.

Code Examples

Sed consectetur risus in velit consequat dictum. Quisque aliquet nisi quis ipsum condimentum, id hendrerit orci rhoncus. Curabitur ac pretium leo. Mauris sit amet ipsum ut risus scelerisque tincidunt. Praesent justo libero, tincidunt et elementum id, fringilla a elit. Nullam risus turpis, ullamcorper eu ante at, euismod mollis ligula. Maecenas dapibus ornare arcu, eget pellentesque nunc fringilla quis. In interdum efficitur turpis id luctus. Cras sit amet felis volutpat, porta turpis ut, dapibus eros. Aenean a vehicula lacus. Proin tempus purus nec sem placerat, sit amet blandit nunc feugiat.

Nulla convallis velit vel auctor ultrices. Proin aliquet ligula in tempus dignissim.

Mauris in dui aliquam

Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus. Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus. Mauris nec metus sit amet nulla dictum tempus vitae malesuada ligula. Proin auctor tristique velit ac suscipit. Aliquam egestas ullamcorper lacus et sagittis. Suspendisse lobortis feugiat elit, a tincidunt ante dignissim sit amet. Suspendisse non sem odio. Ut eleifend vitae est sed iaculis. Ut hendrerit lacus ut ipsum blandit placerat. Morbi a scelerisque lorem, sit amet accumsan arcu. Maecenas nec lacinia metus

<div class="l-editorial-content">
	...
	<div class="l-editorial-content__pullout [ Modifier ]">
		...
	</div>
	...
</div>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.l-editorial-content Styling for text Yes div  
.l-editorial-content__pullout Styling for pullout container on the left Yes l-editorial-content > div  
.l-editorial-content__pullout--right Modifier for placing the pullout container on the right   .l-editorial-content__pullout