Webpage Design Snippets

Snippets are sample blocks that content owners can use to amplify the appearance and layout of a web page, without having to understand the underlying code.

Carefully select a block by clicking & dragging your mouse and copy & paste it into an editable field.

Note that design elements may change depending on the width of a user’s browser. For example, when viewed on a desktop computer, an image may be displayed off to the right, but your mobile device may display the same image centered on the page. This is by design.

Media Module

If you need a segment with an image on the left and tightly coupled content on the right. For example, contact information with a photo of the person next to it.

sample image

Lorem ipsum dolor sit amet tation sed ille eros et. Rusticus dolor ullamcorper. Elit odio accumsan os probo. Nostrud praemitto jugis defui lucidus. Natu quis lobortis eu vel nostrud qui. Vicis consectetuer in ventosus plaga.

Better Box

If the box in the editor has got you down, try this one instead. It accepts multiple paragraphs or other elements, and just looks and works nicer, to boot.

Lorem ipsum dolor sit amet ut cogo vero wisi opto et. Et mara quis te veniam sit blandit macto ut.

Turpis mara odio cogo vero commodo voco decet lobortis luptatum.

Supplementary Box

Lorem ipsum dolor sit amet ut cogo vero wisi opto et. Et mara quis te veniam sit blandit macto ut.

Turpis mara odio cogo vero commodo voco decet lobortis luptatum.

If you need the box pulled off to the right, use this one. Insert it before the start of a paragraph.

Image with Caption

sample image

Lorem ipsum dolor sit amet.

A box typically pulled off to the right, with an image and a caption below it. For best results, don’t insert these between a heading and a paragraph. Instead, put them before the heading or before a second (or third, etc. paragraph).

Full-Width Image with Caption

sample image

Lorem ipsum dolor sit amet feugait os suscipere nisl secundum quae iusto usitas premo.

Pull Quote

A box, typically pulled off to the right, with a notable piece of text pulled from the main content, for emphasis or general scanning of the article.

Pull Quote with Citation

If you’re actually quoting someone and need to include a citation, use this box.

Full Width Pull Quote

Full Width Pull Quote with Citation

This should cover most of what you will need to make the best pages you can, but if there’s something else you need, contact the web team and we can discuss what might be the right solution for you.