The College Drupal distribution supports placing additional classes on most content rows using the “Custom Class” field. This class is applied to the wrapper of the content row. You can add multiple classes by separating them with a space.
Animation classes from https://daneden.github.io/animate.css/ can be used in the Custom Class field. The field should also contain the “animated” class. The usage of the "animate__" prefix is not necessary within the context of our distribution.
By default, the animation will play on page load, so items below the fold will play before you see them. You can prefix the animate.css class with “scroll-” to prevent the animation from playing until the user scrolls into view. This feature is not a part of the animate.css library so they don’t mention it in their documentation.
An example of a content row where the content fades in from below when the user scrolls into view:
There are a number of built in classes to further style a content row. This list will grow in the future.
|starburst||Adds an ASU starburst effect to the background. Works with most colors but not background images.|
|stripes||Adds a subtle striped effect to the background. Works with most colors but not background images.|
|narrow||Reduces the max width of the content. Useful when a paragraph would span the full page width to improve readability.|
|jumbo||Make all the headings and text larger.|
|height-100vh||Makes the height 100% of the current viewport (browser window)|
|vertical-center||Center the content vertically in the container. Works well to put text in the center of an image overlay or in a two column setup.|
|heading-left||Left align the heading field (default is center)|
|heading-right||Right align the heading field (default is center)|
|hide-heading||Hide the heading field, useful if using tabs/accordions to prevent the heading from appearing twice, once in the tab item and once in the content.|
|hide||Hide the whole section from the published page.|
|edge-to-edge||Eliminate margins and make element full width.|
|img-to-edge||Make the first image in the content ignore margins and expand to full width.|
In addition to the animation and default classes, you can write your own classes to use in the Custom Class field using the Drupal Asset Injector module included with The College Drupal distribution. Go to /admin/config/development/asset-injector/css to create a new stylesheet for your site. You can specify which pages it applies to or make it global.