Skip to content

Content alignment options

UK Specialists in premium wines made by independently owned winemakers

Here is a page of image alignments we can use to create more interesting page flow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa metus, laoreet in sapien sit amet, vulputate imperdiet turpis. Duis congue magna a auctor ullamcorper. Suspendisse magna odio, accumsan commodo ipsum nec, auctor pellentesque nibh. Sed aliquam dui orci, vel posuere quam imperdiet id. Suspendisse sit amet libero quis est commodo interdum.

Grégory and Virginie Barbet enjoying a bottle of their red wine in the sunshine
This image is aligned ‘wide’ using the Gutenberg aligment tools

Etiam suscipit, ante quis fringilla rhoncus, nisl nunc volutpat purus, at mattis ipsum lorem at sem. Pellentesque nec congue magna, sed semper libero. Integer aliquet a orci nec laoreet. Nam placerat est eget rhoncus luctus. Donec at nibh convallis nulla accumsan convallis ac at velit. Phasellus a erat non lectus pellentesque blandit. Praesent non varius elit, ut lacinia nulla. Duis consectetur lobortis erat id pellentesque. Vivamus mattis ante quam, eu vestibulum ligula ullamcorper a. Nunc rhoncus eleifend condimentum. Nulla consequat egestas arcu. Aliquam tristique libero ut dignissim maximus. Aenean vitae imperdiet purus. Aenean aliquam bibendum vulputate. Donec commodo placerat lorem sit amet feugiat. Sed iaculis augue tortor, ut maximus turpis aliquam a.

Grégory and Virginie Barbet enjoying a bottle of their red wine in the sunshine
This image is just normally in the text, with no alignment specified

In pellentesque libero ornare tellus mattis, quis interdum augue pellentesque. Integer aliquam metus sit amet felis laoreet fermentum. Quisque viverra urna nec nibh laoreet faucibus. Suspendisse ornare pulvinar mauris eget auctor. Phasellus non risus egestas, posuere turpis vestibulum, ultricies eros. Curabitur commodo diam vestibulum, fringilla nisi ut, hendrerit erat. Nunc hendrerit rhoncus turpis eget consequat. Aenean vitae tristique nibh, et viverra leo. Morbi vulputate nisi vel pellentesque eleifend. Nullam tristique, lectus ut mattis maximus, sapien elit aliquam justo, non condimentum enim lectus vel risus. Nullam quis elementum nibh. Phasellus sit amet augue vel purus volutpat pharetra. Suspendisse ac iaculis nibh, vitae fringilla quam.

This is a full-wide image!
Pierre-Henry Gagey, Louis Jadot President, standing inside the Couvent des Jacobins - an ancient chapel next to the home of Jadot in Beaune
This image is aligned left, using the GB toolbar.

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Pierre-Henry Gagey, Louis Jadot President, standing inside the Couvent des Jacobins - an ancient chapel next to the home of Jadot in Beaune
This image is aligned left, using the GB toolbar, and ALSO bled left using the custom style…

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Eva de Benito, Head Winemaker of Viña Real in the Rioja Alavesa, stands wearing a black and white top, while examining the colour of a red wine in a glass tilted against a pale wooden counter top
This image is aligned right using the GB tools.

Nulla porttitor purus et aliquet tempus. Nunc non nisl lorem. Nulla mi sem, aliquam quis dolor nec, molestie molestie urna. Duis sit amet aliquam lectus, a maximus mauris. Praesent mollis dolor quis dolor dapibus, ac feugiat odio feugiat. Sed hendrerit fringilla tellus ac condimentum. Suspendisse potenti. Aliquam erat volutpat. Vivamus aliquet, lectus eget aliquet vestibulum, arcu mauris sagittis lectus, sit amet bibendum metus sapien ac risus. Mauris lacinia non lorem sed fermentum.

Nulla porttitor purus et aliquet tempus. Nunc non nisl lorem. Nulla mi sem, aliquam quis dolor nec, molestie molestie urna. Duis sit amet aliquam lectus, a maximus mauris. Praesent mollis dolor quis dolor dapibus, ac feugiat odio feugiat. Sed hendrerit fringilla tellus ac condimentum. Suspendisse potenti. Aliquam erat volutpat. Vivamus aliquet, lectus eget aliquet vestibulum, arcu mauris sagittis lectus, sit amet bibendum metus sapien ac risus. Mauris lacinia non lorem sed fermentum.

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Eva de Benito, Head Winemaker of Viña Real in the Rioja Alavesa, stands wearing a black and white top, while examining the colour of a red wine in a glass tilted against a pale wooden counter top
This image is aligned right using the GB tools, and ALSO bled right using the custom style….

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

The medieval hilltop town of Sancerre visible behind a low-down view across a vineyard, with the sun setting behind
This image has a block-style of “bleed left” so it overflows the main content column, but only to the left, unlike the wide and full GB alignment options.

Nulla porttitor purus et aliquet tempus. Nunc non nisl lorem. Nulla mi sem, aliquam quis dolor nec, molestie molestie urna. Duis sit amet aliquam lectus, a maximus mauris. Praesent mollis dolor quis dolor dapibus, ac feugiat odio feugiat. Sed hendrerit fringilla tellus ac condimentum. Suspendisse potenti. Aliquam erat volutpat. Vivamus aliquet, lectus eget aliquet vestibulum, arcu mauris sagittis lectus, sit amet bibendum metus sapien ac risus. Mauris lacinia non lorem sed fermentum.

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

Close up image of the label on a bottle of Sancerre La Chatellenie wine
This image has a block-style of “bleed right” so it overflows the main content column, but only to the left, unlike the wide and full GB alignment options.

Nulla porttitor purus et aliquet tempus. Nunc non nisl lorem. Nulla mi sem, aliquam quis dolor nec, molestie molestie urna. Duis sit amet aliquam lectus, a maximus mauris. Praesent mollis dolor quis dolor dapibus, ac feugiat odio feugiat. Sed hendrerit fringilla tellus ac condimentum. Suspendisse potenti. Aliquam erat volutpat. Vivamus aliquet, lectus eget aliquet vestibulum, arcu mauris sagittis lectus, sit amet bibendum metus sapien ac risus. Mauris lacinia non lorem sed fermentum.

We can also apply Bleed-Left and Bleed-Right styles to Pullquote blocks.

Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat.

I’m a PULLQUOTE, with a style of Bleed Left, so that I bleed to the left of the main content area.

A pullquote, 21 Mar 2019

Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.Morbi ipsum dolor, aliquam vel bibendum in, vulputate ut odio. Aliquam erat volutpat. Duis viverra sagittis neque luctus imperdiet. Pellentesque a urna eu ex aliquam scelerisque consequat at arcu. Sed porttitor nibh eget leo convallis, in rhoncus velit rhoncus. Suspendisse imperdiet id tellus sed varius. Sed egestas posuere ipsum quis placerat. Nulla malesuada orci quis libero imperdiet, eget faucibus orci laoreet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras pellentesque est eu lorem porttitor, vel porta orci dictum. Morbi gravida ipsum at erat fringilla fermentum. Suspendisse placerat tincidunt ex. Mauris sed consequat augue, id pellentesque nulla. Sed venenatis ante nec ante commodo maximus. Nam iaculis finibus dui quis rhoncus.

I’m a PULLQUOTE, with a style of Bleed Right, so that I bleed to the right of the main content area.

A pullquote, 21 Mar 2019

Nulla porttitor purus et aliquet tempus. Nunc non nisl lorem. Nulla mi sem, aliquam quis dolor nec, molestie molestie urna. Duis sit amet aliquam lectus, a maximus mauris. Praesent mollis dolor quis dolor dapibus, ac feugiat odio feugiat. Sed hendrerit fringilla tellus ac condimentum. Suspendisse potenti. Aliquam erat volutpat. Vivamus aliquet, lectus eget aliquet vestibulum, arcu mauris sagittis lectus, sit amet bibendum metus sapien ac risus. Mauris lacinia non lorem sed fermentum.

Nulla porttitor purus et aliquet tempus. Nunc non nisl lorem. Nulla mi sem, aliquam quis dolor nec, molestie molestie urna. Duis sit amet aliquam lectus, a maximus mauris. Praesent mollis dolor quis dolor dapibus, ac feugiat odio feugiat. Sed hendrerit fringilla tellus ac condimentum. Suspendisse potenti. Aliquam erat volutpat. Vivamus aliquet, lectus eget aliquet vestibulum, arcu mauris sagittis lectus, sit amet bibendum metus sapien ac risus. Mauris lacinia non lorem sed fermentum.

Blockquotes

Aliquam erat volutpat. Vivamus aliquet, lectus eget aliquet vestibulum, arcu mauris sagittis lectus, sit amet bibendum metus sapien ac risus. Mauris lacinia non lorem sed fermentum.

Blockquotes don’t get alignment options, they’re just blockquotes. If you want to apply a style other than ‘large’, use a Pullquote instead.

A blockquote, with no alignment

Quotes can be large though! Just give them a style of large.