Longform Layout

Longform layouts provide a number of width options for longform storytelling, spanning from wider widths meant for immersive media, to thinner width containers meant for easy text legibility.

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

This component requires full-screen display to display correctly, open the full example for a more accurate display.

Examples and Code

Select exampleDefault

Open Full Example

<div class="longform-layout longform-layout--content b1">
  <p>This is a paragraph constrained by this layout that is meant for text.</p>
</div>
<div class="longform-layout longform-layout--photos b1">
  <p>This is a paragraph constrained by this layout that is meant for photos.</p>
</div>
<div class="longform-layout longform-layout--wide b1">
  <p>This is a paragraph constrained by this layout that is meant for wide media.</p>
</div>
<div class="longform-layout longform-layout--fullbleed b1">
  <p>This is a paragraph constrained by this layout that is meant for full-bleed immersive content.</p>
</div>

Guidance

Usage Guidance

• Use to lay out content on immersive and marketing pages
• Don’t use for page styling in content with sidebars: These styles are intended to go full width, using on pages with a sidebar will result in awkward design.
• Don’t use merely to set an element’s width: Use the max-w utility classes for this instead.

Styles

Classname	Effect	Reason to Use
longform-layout--content	Container is max 780px wide	Use for text paragraphs
longform-layout--photos	Container is max 1200px wide	Use for grids of photos or other large images
longform-layout--wide	Container is max 1400px wide	Use for wide, immersive content
longform-layout--fullbleed	Container is full width	Use for full-bleed content