Width delimiter

CSS Class.
Use it by putting the correct w--[class] on an element that you want to limit the width on.
The different widths are corresponding to the responsive breakpoints.
A Width delimiter is responsive and will only be present when the container is bigger that the size of the Width delimiter.
Will by default center it's content.

Width delimiter

Component status: WIP

.w--xs

A fullwidth container.

A div with class="w--xs"

Extra small

.w--sm

A fullwidth container.

A div with class="w--sm"

Small

.w--sm-plus

A fullwidth container.

A div with class="w--sm-plus"

Small plus

.w--md

A fullwidth container.

A div with class="w--md"

Medium

.w--lg

A fullwidth container.

A div with class="w--lg"

Large

.w--xl

A fullwidth container.

A div with class="w--xl"

Extra large

.w--xxl

A fullwidth container.

A div with class="w--xxl"

Extra extra large

.w--xxxl

A fullwidth container.

A div with class="w--xxxl"

Extra extra extra large

<div style="border: 1px dotted grey;">
    A fullwidth container.
    <div class="" style="background-color: lightgrey;">A div with class=""</div>
</div>

Se mere

[title]