The Cosmic theme now offers a set of class names that can be applied to provide consistent borders around elements.
Note: These features require your site to be using UO Core/Cosmic version 21.10 or newer.

Border Spacing

If you need to add or remove borders around an element, you can apply easy, consistent fixed borders using the following classes. This spacing is used throughout the theme and design framework, so your use of these classes will be consistent with the rest of the theme.

A series of utility classes for achieving consistent borders. These classes, applied in html, are preferred to controlling borders on elements via CSS. Project-wide CSS is typically littered with lots of rulesets that only declare borders on an element. These utilities help reduce overall css sizes, help eliminate magic numbers, and help create in-page and page-to-page visual harmony.

The classnames use the following shorthand:

b = border

t = top
r = right
b = bottom
l = left

x = x-axis
y = y-axis

0 = zero

1 = applies value 1px;
2 = applies value 2px;
3 = applies value 4px;
4 = applies value 5px;
5 = applies value 8px;
6 = applies value 10px;
7 = applies value 15px;
8 = applies value 30px;

Customizing Border Colors

The border colors default to the UO Green color, but they can be customized to any of our palette colors using the "palette-accent-{color}" classes on the element with the border.

Border Color Examples