Utilities - Overlay

Make an element overlay its container by adding overlay utilities.

Basic Example

Add the _overlay utility class to an element to make it cover the entire containing block. The containing block refers to a parent element with position: relative;.

This text is covered by an element with an overlay helper class.

<div class="_position:relative">
    <p>This text is covered by an element with an overlay helper class.</p>

    <div class="_overlay" style="background: rgba(0, 0, 0, 0.1);" />
</div>

Add the _overlay-link utility class to a link to make the entire containing block clickable using a ::after pseudo element. In most cases, the containing block refers to the parent element with position: relative;.

Some quick example text to build on the card title and make up the bulk of the card's content.

Example Link
<i-card>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>

    <a class="_overlay-link" href="https://inkline.io">Example Link</a>
</i-card>