Containers

• Responsive

Responsive

This component is responsive, which means that every modifier may be applied using classes or shorthand attribute on specified screen sizes.

<!-- Design tokens with classes -->
<element class="[MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME1] [MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME2]"></element>
<!-- Example with md width container modifier applied only on sm and md screen sizes -->
<div class="my-container mod-w-md-sm mod-w-md-md"></div>

<!-- Design tokens with attribute shorthand -->
<element [MOD_PREFIX]-[MOD_NAME]="[SCR_SIZE_NAME1],[SCR_SIZE_NAME2],etc"></element>
<!-- Example with md width container modifier applied only on sm and md screen sizes -->
<div class="my-container" mod-w-md="sm,md"></div>

<div class="my-container mod-w-xs">mod-w-xs</div>
<div class="my-container mod-w-sm">mod-w-sm</div>
<div class="my-container mod-w-md">mod-w-md</div>
<div class="my-container mod-w-lg">mod-w-lg</div>

<style>
    /* DEMO ONY */
    body { background-color: #eee; }
    .my-container { background-color: yellowgreen; border: 1px dotted green; }
</style>