Divider with label

How to use it

When using a divider, put a label in the centre of it and stop the dividing line either side of the label.

When to use it

If you want to separate two sections but keep some connection between the two of them, or title the next section, you can add a label to the divider. This method saves space over putting the text above or below the divider, and since there's a gap in it, it's not as strong a division. You could use this if you have two areas that are alternatives to something, so the user needs to pick one or the other.

What to watch out for

If your text sits on one line, it'll appear to be part of the divider, but if it's on two lines you might lose some of that effect. I also find it's better to have short text than long text, since the longer the text, the shorter the dividing lines.

Examples

Example