- Taxonomic name: L-EDITORIAL-CONTENT
- Added on: v3.0.0 (15/09/17)
Editorial content container
Editorial content panels provide a container which allows for pullout sections such as blockquotes, cards and images.
Examples
Interactive example
Code example
<div class="l-editorial-content">
...
<div class="l-editorial-content__pullout [ Modifier ]">
...
</div>
...
</div>Development and test
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.
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 |