Oomph Paragraphs

Oomph Paragraphs — A paragraph configuration starter kit

Oomph paragraphs is built with reusable components. The idea is to give sites that use this module a starting point of useful content components and configuration to control the visual design of them. The content types and how they might be used are shown below.

Unlike preset bundles, components can nest inside each other for greater layout flexibility. Layout of these components inside of rows is handled independently of the kinds of content or the number of components that are used. The visual diagram below attempts to illustrate this flexibility.

Content components include:

• Row container: arrange multiple components in a horizontal orientation
• Column Group container: arrange multiple components in a vertical orientation
• Hero Row: Group an image and WYSIWYG content into a "Hero" image banner
• WYSIWYG: free-form rich text content
• Image: Media URL field
• Video: External URL field
• Testimonial: Quote, source, job title, and source company fields
• Accordion: Summary, Details, and optional Icon/Image fields

Design controls (via configuration options) include:

• Background colors and/or images
• Border top and/or bottom on rows, in dashed or solid styles
• Caret down (Triangle at the bottom of a row)
• Vertical alignment of components inside a row
• Horizontal alignment of components inside a row
• 18 layout options for 1, 2, 3, or 4 columns
• Borders between components in a row
• Animation "entrances" for components — zoom in, fade in, slide in, when the row enters the viewport

An example set of sites built with Oomph Paragraphs:
http://annualreport.bcbsri.com: One long scrolling page utilizing one design theme
http://communityreport.bcbsri.com: One long scrolling page utilizing the same design theme, just used differently. Animations are used here as well.