The ClarkU web platform has additional class names that let you customize blocks in ways the editor can’t.
Color
split-background-50creates 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 usesplit-background-25andsplit-background-75to change the amount of background cover to 25% and 75% respectively.pleasantvillemakes images appear black and white, but in color when you hover over themhas-drop-shadowadds 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-1andhas-drop-shadow-2.
Columns and sidebars
sidebaradd 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-rightLike sidebar, but on small screens, the sidebar column display after the main column.
Overlap
liftedelevates an element 4rem on larger screensstagger-leftelevates odd numbered children by 4rem on larger screens (intended for two-column layouts)stagger-rightelevates even numbered children by 4rem on larger screens (intended for two-column layouts)hangpushes an element that is aligned left or right slightly out of the text column
Spacing
sectionadds 4.5rem of margin to the top and bottom of an element.paddedadds 2-4rem of padding to an element depending on screen size.padded-inline-sleightadds 2.5rem of padding to the left and right.roomyadds 2.5rem-5rem of both margin and padding. Use cautiously.double-bottom-margindoubles the standard bottom margin.triple-bottom-margintriples the standard bottom margin.no-gapremoves the default spacing between columns, grid elements, etc.double-gapdoubles the default spacing between columns, grid elements, etc.triple-gaptriples the default spacing between columns, grid elements, etc.no-marginremoves the margin from an element.no-paddingremoves the padding from an element.abut-startremoves the space before an element.abut-endremoves the space after an element.
Typography
serifdisplays the element using Loretta, our serif typeface.sansdisplays the element using Lato, our sans-serif typeface.displaydisplays the element using IvyPresto, our display typeface.eyebrowdisplays the element in the bold all caps style found frequently above headings.introintended for introduction paragraphs, increases font size and uses the serif face.captionintended for captions, it has less top margin so it is closer to the preceding element.arrow-linkmakes all links inside the element appear with arrows.columns-listmakes a list appear in up to 3 columns (based on screen width). Add classhalvesto limit it to 2 columns.
Width
element-widthsets 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-unrestrictedremoves the maximum width from an element.
Miscellaneous
sr-onlyhides an element from visual browser so only assistive technology can find it.horizontaleither 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-borderremoves the border from an element.