Overview

Borders can be used to delineate spaces, emphasize elements, and increase clarity in content-dense UI. Proper use of borders helps in creating a visual heirarchy, seperating content, and drawing marketer's attention to specific sections of the page.

Borders also can include rounded edges that help modernize the interface and align with Iterable's brand identity.

 

Border width

• 1px (default) - used in most applications like card borders, dividing Action Menu items, and seperating a header from the content
• 2px - can be used to draw emphasis to an input or a container that is actively being edited, like the Details of a campaign or template.

 

Border color

Primary

This is the default color style for borders in Aurora.

It can be quickly applied in the Stroke property using the --border-primary variable.

 

 

Subtle

Use a 1px subtle border to break up sections of content or actions, for example separating additive actions from destructive actions in a menu.

It can be quickly applied in the Stroke property using the --border-subtle variable.

 

 

Semantic borders

Some elements can have semantic meaning based on their style. This follows the same patterns outlined in the “Applying Color” document. The different semantic borders are outlined in the palette below.

 

 

Subtle semantic borders

When deciding between whether to use the base or subtle variable, it’s important to consider the element that it’s being applied to. For instance, a component may use a subtle border to help prevent the background of the component from bleeding into the background of the page (particularly on grey).

 

 

Strong semantic borders

Some semantic borders have a “strong” variable that is used in input controls that have more emphasis and can communicate affordance to the marketer on the component’s state—error, selected, success, etc.

 

Border radius

Border radius can soften the look of elements and align with Iterable's brand style. Most border radii is defined at the component level, but may need to be applied to unique containers or domain-specific elements.

 

 

 

Focus rings

Focus rings indicate the actively focused element in the interface, particularly when the marketer relies on the keyboard for navigation. Focus rings play a vital role in accessibility by helping users understand where they are on a page without relying on a mouse.

 

 

In most cases, the focus rings are applied as predefined box-shadow configurations, but if the element is already using the box-shadow CSS property, they can be applied as outline as well.

Much like color and borders, the focus styles applied should correspond to their implied semantic meaning.

 

When to use borders over depth?

• Borders are used to break up content, whereas depth can highlight areas of interest on an interface. Learn more on applying depth with shadows in Aurora.
• A card or container that sits on the root background of the page should have depth applied and not use a border. If there are nested cards or container within that, a border should be used.