Custom class field

Overview

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. For example: topo-white jumbo narrow.

The College Drupal distribution default classes

There are a number of built in classes to further style a content row. This list will grow in the future.

Default classes - utilities

Class name Description
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.
no-gutters Remove the space between columns in a Column row
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.
unwrap-table table content will not overflow outside the parent container
vert-text Centers text vertically and eliminates card background and border

Default classes - backgrounds

There are a number of built in classes to add backgrounds to a content row.

Class name Description
starburst Adds an ASU starburst effect to the background. Works with background styles: blue, dark grey, gold, grey, maroon and white.
stripes Adds a subtle grey/white striped effect to the background. Changing background style does not change stripe color.
morse-black "Learn to thrive" morse code with a primary background color of black. Requires background style: black to apply.
morse-white "Learn to thrive" morse code with a primary background color of white. Requires background style: white to apply.
network-black Neuron style network with a primary background color of black. Requires background style: black to apply.
network-white Neuron style network with a primary background color of white. Requires background style: white to apply.
topo-black Topographic map of "A" mountain with a primary background color of black. Requires background style: black to apply.
topo-white Topographic map of "A" mountain with a primary background color of white. Requires background style: white to apply.

Default classes - content sections

There are a number of built in classes to convert a Card into a pre-styled content section. 

Class name Required row type Description
overlapped Card Card with the image in the background instead of on top.
overlapped-left Card Moves the card image into a right side column with the card body slightly overlapping it.
overlapped-right Card Moves the card image into a left side column with the card body slightly overlapping it.
inset-box Card Creates a gray background around the card and centers it on the page.
side-left Card Card with image on the left side instead of on top.
side-right Card Card with image on the right side instead of on top.

Default classes - style overrides

There are a number of built in classes to provide alternate brand compliant styling.

Class name Required row type Description
hero-btn1-gold Hero Gold background color for button 1 only
hero-btn2-gold Hero Gold background color for button 2 only
hero-btn12-gold Hero Both buttons gold background color

Animation classes

Animation classes from the Animate.css library 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, add to the Custom Class field:

animated scroll-fadeInUp
Class name Description
animated required class to trigger animation library
scroll- prefix to prevent animation until element is in the user's view

Animation classes list

Attention seekers
Back entrances, exits Bouncing entrances, exits Fading entrances Flippers, lightspeed Rotating entrances, exits Fading exits Sliding entrances, exits Zooming entrances, exits Specials
bounce backInDown bounceIn fadeIn flip rotateIn fadeOut slideInDown zoomIn hinge
rubberBand backInLeft bounceInDown fadeInDown flipInX rotateInDownLeft fadeOutDown slideInLeft zoomInDown jackInTheBox
headShake backInRight bounceInLeft fadeInDownBig flipInY rotateInDownRight fadeOutDownBig slideInRight zoomInLeft rollIn
wobble backInUp bounceInRight fadeInLeft flipOutX rotateInUpLeft fadeOutLeft slideInUp zoomInRight rollOut
flash backOutDown bounceInUp fadeInLeftBig flipOutY rotateInUpRight fadeOutLeftBig slideOutDown zoomInUp
pulse backOutLeft bounceOut fadeInRight lightSpeedInRight rotateOut fadeOutRight slideOutLeft zoomOut
shakeX backOutRight bounceOutDown fadeInRightBig lightSpeedInLeft rotateOutDownLeft fadeOutRightBig slideOutRight zoomOutDown
shakeY backOutUp bounceOutLeft fadeInUp lightSpeedOutRight rotateOutDownRight fadeOutUp slideOutUp zoomOutLeft
swing bounceOutRight fadeInUpBig lightSpeedOutLeft rotateOutUpLeft fadeOutUpBig zoomOutRight
tada bounceOutUp fadeInTopLeft rotateOutUpRight fadeOutTopLeft zoomOutUp
wobble fadeInTopRight fadeOutTopRight
jello fadeInBottomLeft fadeOutBottomLeft
heartBeat fadeInBottomRight fadeOutBottomRight

Create your own custom classes

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.

Any custom changes you make need to conform to ASU brand and web standards.