Skip to main content

Sample Page Builder Blocks

Welcome to the CFAES Page Builder. This tool allows you to easily created complex branded layouts. Below you will find a table of contents to navigate the various types of components you can use to build your page.

This text you are reading now is provided by our Text component and the links in the table of contents below link to our anchor component. When you utilize the anchor component with a link in the Text component (by adding the # and the ID of the Anchor component in your links URL) you can quickly link to different parts of your page.

Table of contents

Example of the Text component

Like the introductory paragraph on this page, this text here is also using the Text component. The Text component provides a "What You See Is What You Get" editor which allows you to bolditalicize, underline, strike-through, superscript, subscript, create bulleted or numbered lists, create links, and insert special characters.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.

Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.

Example of the Text Columns component

The Text Columns component allows you to create two columns of text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.

Examples of the Teaser component

4-H'ers preparing their rockets for launch

4-H’ers rocket to national finals

What they discovered on the way—about working together and helping each other—should take them even further.

A walleye in a fishing net

A world of walleye

... and steelhead and others. A CFAES alumnus has spent his career growing ever better fishing in Ohio. The proof is in the net.

Examples of the Image with Text component

The Image with Text component provides two ways to display an image along with text, with the image left-aligned or right-aligned. There are three sizes of image to choose from (small, medium, and large), an optional caption, and an optional link.

With left-aligned medium image, no link, with caption

A basket of Red Delicious apples
This image is medium size with no link

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.

With right-aligned large image, with link, with caption

Go to CFAES' homepage
Photos can also have links with captions (Photo: Getty Images)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.

Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.

With right-aligned small image, with link, without caption

Go to CFAES' homepage

Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.

Examples of the Quote with Text component

To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep;

Prince Hamlet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.

Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.

Example of the Quote component

Don't judge each day by the harvest you reap but by the seeds that you plant

Robert Louis Stevenson

Image

Sometimes you'll want to display a feature image. The Image component is what you will want. Like the Image with Text component the Image component provides three sizes (small, medium, and large) and allows the image to be linked as well as caption. The large image will span the entire length of the content area. The small and medium options are progressively smaller and centered horizontally in the content area.

OSU Stadium at dusk
OSU stadium at dusk

Example of an Accordion component

Example of the Cards component

A red tomato

Can science make tomatoes even better for you?

Backed by a national ‘New Innovator’ award, a CFAES scientist is trying to find out.
Front view of the new cutting-edge science building

Cutting-edge in Wooster

Summer foliage on the OSU campus with the Animal Sciences building the background

An atypical semester begins

Image Row

This block will add a row of images, you can choose how many images to display in each row and accompany each with a caption. This can create a single row of images or a grid. Rows can have between 2 and 6 images.

Illustration of a microscope
Image Caption
Illustration of a Microscope
Images in these image row blocks can link
Illustration with three icons in a circle
illustration of a ribbon wrapped certificate
A second row of images
illustration of hands clasped together in a square
Illustration of a student in a graduation cap
map of ohio with the two CFAES campuses marked
Uneven final rows will center
illustration of a whiteboard presentation
This block will work best when images have similar proportions to create even rows.

Spotlight Boxes

Spotlight Boxes add a row of linked images that crop as squares.  These are intended as an interface element and will not show up when printing.

Example of the Page Break component

The Page Break component is an invisible component, that is when you use this component nothing will display on the screen. This component is useful when printing to control where you would like the page to break.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras semper auctor neque vitae tempus quam pellentesque. Nunc sed blandit libero volutpat. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam. Suspendisse ultrices gravida dictum fusce ut. Ornare quam viverra orci sagittis eu volutpat odio. Fermentum odio eu feugiat pretium nibh. Massa sapien faucibus et molestie. Malesuada fames ac turpis egestas integer eget aliquet nibh. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Rutrum quisque non tellus orci ac auctor augue mauris.

Lectus proin nibh nisl condimentum id venenatis a condimentum. Neque convallis a cras semper auctor neque vitae tempus. In hac habitasse platea dictumst quisque. Venenatis cras sed felis eget velit aliquet sagittis. Imperdiet sed euismod nisi porta lorem mollis. Aenean euismod elementum nisi quis eleifend quam adipiscing. Quam pellentesque nec nam aliquam. Sollicitudin ac orci phasellus egestas tellus rutrum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Id leo in vitae turpis massa sed elementum tempus. Eget magna fermentum iaculis eu non diam phasellus. Non sodales neque sodales ut etiam sit amet nisl. Aliquet bibendum enim facilisis gravida neque. Risus feugiat in ante metus dictum at. Nulla at volutpat diam ut venenatis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Eros in cursus turpis massa tincidunt dui ut.

Example of the Google Map component

Example of the Table component

2022 Pets
Name Breed Age Favorite Treat
Sway Boston Terrier 13 Bacon
Jack Taco Terrier 9 Chicken Nuggets
Marshmallow Frenchton 1mo TBD

 

Example of the YouTube Video component