Position

Relative #

Use the position-relative class to make an element with position: relative.

<div class="position-relative">...</div>

This is useful if a module or its blocks use a link that is stretched to the full height and width of the element. See the Link module description for more details.

<div class="item position-relative">
    <div class="item-head">...</div>
    <div class="item-body">
        <a href="#" class="link-stretched">...</a>
    </div>
</div>

Over #

Use the position-over class to make an element over the previous one. For example, this works when you want to place an image as a background for text or other elements.

Quotes

Famous quotes
on nature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

<div class="card bg-dark r-base">
    <div class="card-image r-base image-cover">
        <img class="r-base" src="...">
    </div>
    <div class="card-box p-6 pb-10 position-over">
        <div class="card-caption mb-3">
            <span class="label label-light">...</span>
        </div>
        <div class="card-head">
            <h2 class="heading-medium heading-light">
                <a href="#">...</a>
            </h2>
        </div>
        <div class="card-body mt-3">
            <p class="text-medium text-light">...</p>
        </div>
    </div>
</div>