Core Tech
Nova
Brand Configuration and Styling
Borders

Borders

🚧

Styling borders is not a fully-solved problem in Nova.

Border implementations are inconsistent between brands and has not been formalized in the design system.

This page will outline the known best-practices.

Terms:

  • Border - A horizontal accent between two elements stacked vertically.
  • Pipe - A vertical accent between two elements stacked horizontally.

Challenges:

  • Toggling between borders and pipes with layout primitive behavior.
  • Toggling between borders and pipes for mobile.
  • Design elements beyond the capabilities of border.

Usage

Define CSS variables with your border styles in the brand globals CSS.

body.pmc-nova--brand-name {
	--brand-name--border--solid-horizontal: linear-gradient( to top, #B4B4B4 100%, #B4B4B4 50%, transparent 50% );
	--brand-name--border--solid-vertical: linear-gradient( to left, #B4B4B4 100%, #B4B4B4 50%, transparent 50% );
}

We're experimenting with different appraoches to borders, including using either the border or background-image property.

Mixins

Some components have mixins that offer simplified and consistent border implementations. The syntax and usage for these mixins will vary.

Examples,

Whenever possible use CSS variables.

// This works.
@include button.inline-border(
	$border: 3px solid #000000,
);
 
// This is preferred
@include button.inline-border(
	$border: var( --brand-name--border--simple-border ),
);

Adjusting padding for borders

As per Every Layout, Nova uses margin-block-start for implementing vertical/stacked spacing between elements.

When using a border, the box model requires we adjust the padding as well, usually by halving the margin and setting the padding to the same value, placing the border visually between the two elements, even though it's fully contained within one.

Whenever possible, using a mixin should solve this problem for you.

BadgesCards