Overlay

Create an element overlay, which can be used as a partial or full cover. The position trait is used to set the location of the overlay.

Deserunt dolore. Explicabo exercitation. In explicabo consequat. Autem fugit, numquam so rem. Proident. Ad magnam, or quia nor inventore nostrud.

Markup

<div pam-Grid>
    <div pam-Unit="2-3">
        <img pam-image src="kss-assets/img/photo-position.jpg" alt="Joanna Kosinska">
        <div pam-position="absolute center" pam-overlay="" pam-skin="text:primary:on:dark">
            Deserunt dolore. Explicabo exercitation. In explicabo consequat. Autem fugit, numquam so rem. Proident. Ad magnam, or quia nor inventore nostrud.
        </div>
    </div>
</div>

Variables

These are all the component specific variables that can be used for customization.

Name	Value
@overlay-dark	`fade(@skin-black, 60)`
@overlay-light	`fade(@skin-white, 80)`
@overlay-on-dark	`contrast(@overlay-dark)`
@overlay-on-light	`contrast(@overlay-light)`
@overlay-padding	`@space-20`