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.
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 |