Advanced class names

The ClarkU web platform has additional class names that let you customize blocks in ways the editor can’t.

Color

• split-background-50 creates the effect of an image overlapping a colored background. It’ll basically overlay the background color over the bottom 50% of the element. You can also use split-background-25 and split-background-75 to change the amount of background cover to 25% and 75% respectively.
• pleasantville makes images appear black and white, but in color when you hover over them
• has-drop-shadow adds a slight drop shadow to text. The drop shadow is black; it’s intended to make white text easier to read. There are two progressively darker ones: has-drop-shadow-1 and has-drop-shadow-2.

Columns and sidebars

• sidebar add to a columns block (with two columns) to create a layout with a main column and a sidebar. On small screens, the sidebar column display above the main column.
• sidebar-right Like sidebar, but on small screens, the sidebar column display after the main column.

Overlap

• lifted elevates an element 4rem on larger screens
• stagger-left elevates odd numbered children by 4rem on larger screens (intended for two-column layouts)
• stagger-right elevates even numbered children by 4rem on larger screens (intended for two-column layouts)
• hang pushes an element that is aligned left or right slightly out of the text column

Spacing

• section adds 4.5rem of margin to the top and bottom of an element.
• padded adds 2-4rem of padding to an element depending on screen size.
• padded-inline-sleight adds 2.5rem of padding to the left and right.
• roomy adds 2.5rem-5rem of both margin and padding. Use cautiously.
• double-bottom-margin doubles the standard bottom margin.
• triple-bottom-margin triples the standard bottom margin.
• no-gap removes the default spacing between columns, grid elements, etc.
• double-gap doubles the default spacing between columns, grid elements, etc.
• triple-gap triples the default spacing between columns, grid elements, etc.
• no-margin removes the margin from an element.
• no-padding removes the padding from an element.
• abut-start removes the space before an element.
• abut-end removes the space after an element.

Typography

• serif displays the element using Loretta, our serif typeface.
• sans displays the element using Lato, our sans-serif typeface.
• display displays the element using IvyPresto, our display typeface.
• eyebrow displays the element in the bold all caps style found frequently above headings.
• intro intended for introduction paragraphs, increases font size and uses the serif face.
• caption intended for captions, it has less top margin so it is closer to the preceding element.
• arrow-link makes all links inside the element appear with arrows.
• columns-list makes a list appear in up to 3 columns (based on screen width). Add class halves to limit it to 2 columns.

Width

• element-width sets the maximum width of an element to 45 rem. This makes text easier to read, and is the default width for headings and paragraphs.
• width-unrestricted removes the maximum width from an element.

Miscellaneous

• sr-only hides an element from visual browser so only assistive technology can find it.
• horizontal either on a card, or on a card’s parent template wrapper, will force traditional cards to render in a horizontal orientation instead of vertical.
• no-border removes the border from an element.