Extends: Expand your alignment catalog

Less offers two special layout options that go beyond regular alignments. These options, called extend wide and extend full, let your content stretch out wider than usual on the page.

Extend wide is perfect for adding emphasis to images and callouts. Notice that this block extends beyond that confines of the content column? It completely interrupts your content and demands attention.

If you want an even more impactful element on your site, you can always use extend full to really draw attention and create an unavoidable visual disruption.

Watercolor website wireframe

Photo by Hal Gatewood on Unsplash

To create extended elements add the .extend, or .extend-full class to your paragraph or image.

<img class="extend-full" src="http://lesswp.com/watercolor-wireframe.webp" alt="Watercolor website wireframe" width="2560" height="1707" />