Longform Breakout

Longform breakout elements display slightly outside of their containing parent on desktop displays. These allow images, captioned photos, or other visual elements to stand out against paragraphs of longform text.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select exampleDefault

Open Full Example

<p>
  Here is a test paragraph that has a longform-breakout in the middle of it. 
  <div class="longform-breakout longform-breakout--left"><img src="/test-image-landscape.jpg" alt="Test Image" /></div>
  This element will break out of the left margin for stylistic purposes.
</p>
<p>This is a paragraph in the middle to make the example look cleaner.</p>
<p>This is a paragraph in the middle to make the example look cleaner.</p>
<p>This is a paragraph in the middle to make the example look cleaner.</p>
<p>
  Here is another test paragraph that has a longform-breakout in the middle of it. 
  <div class="longform-breakout longform-breakout--right"><img src="/test-image-landscape.jpg"  alt="Test Image" /></div>
  This element will break out of the right margin for stylistic purposes.
</p>

Guidance

Usage Guidance

• Use to make story elements stand out: Cards, images, and similar media can break out of the content to make the layout more engaging.
• Avoid on story sections that are not full width: Using in content with a sidebar can result in broken layouts.

Styles

Classname	Effect	Reason to Use
longform-breakout--left	Element shifts left of the left edge of the container	Use when needed for page’s design
longform-breakout--right	Element shifts right of the right edge of the container	Use when needed for page’s design