Edge connector

How to use it

Draw a line from a group of elements to the edge of the screen, with a gap on both sides so nothing is touching.

When to use it

A line like this will ground a group of elements with the nearest edge, which can help with layout. You could just put the elements nearer the edge, but in this case you want the user to notice them, and if they're too close to the outside edge that might not happen. This way it's like something is extending from the outside edge to get your attention.

What to watch out for

Your user's monitor might be big enough that even with this line, the elements won't be close enough to the centre, so take that into account. Also with vertical scrolling being the norm, it's better to have these lines extend from the left and right edges, rather than the bottom and top edges.

Examples

Example