Oomph Paragraphs
This module provides a starter kit of reusable content components and design configurations for Drupal. It allows for flexible layout by nesting components within rows and columns, and includes elements like hero banners, WYSIWYG text, images, videos, testimonials, and accordions with various design controls such as background colors, borders, alignment, and entrance animations.
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.