Stroke as container brander

How to use it

Add a stroke of colour to the top edge of a container or whole page.

When to use it

This is very useful if you're not sure how to make a page or container look a bit more interesting, or don't want to take the effort. You can also use it to easily add brand colour to the design.

It's a good way of making a very minimal or basic design more interesting without needing to add too much noise.

What to watch out for

If you are using this for a modal or similar container, and have controls like a close button at the top of the modal, you might find that this interferes with those controls.

If you're using this for a whole page, you might need to make the line thicker since it'll be right up against the top edge of the viewport, and might be less noticeable.

Examples

Example