Scrollbox

The scroll box allows a large amount of content to be packed into a small space.
The heading can have a contrasting background and can be made to stick in position while the rest of the content scrolls.
This first paragraph is optional.

The heading is made to stick using the CSS selector "position:sticky". The scroll arrows can be hidden if not required and inherit the heading font color.
The image is optional and can be either full width or set as a percentage of the width so that the second text block wraps around it.
It has a field for entering alt text and a slider for adjusting the width.
The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The optional CTA style link is configured to open an internal page. It can be aligned left, center or right and has controls for setting the color, background, hover color and the border width color and radius.
The container can be styled for background color, border width, color and radius and box shadow color and radius.
When adding the content, drag the widget height to expose everything and then reduce the height to expose the required amount before publishing.
These boxes are ideal for use on both the mobile and the full versions of the site. Set up the mobile version first and then copy it over to the full site and adjust the width and height.
If a number of these boxes are being used, set up the basic box and style it on a template page so that it can be copied when required.
Note that a template page is not a master page. It is a page which is excluded from the navigation and contains basic elements that are used on many pages of the site.
If the template page is uploaded to the server, insert this code into the Head Code box in the Page inspector …
<meta name="robots" content="no index">
This will prevent the page from being indexed by the search engines.