Modules

Image

This module helps to work with images.

Base #

In Superkube, images are responsive by default and fill the entire width of the parent container, even if their size is larger than it.

Image caption

<figure>
    <img src="...">
    <figcaption>...</figcaption>
</figure>

Cover #

Use the image-cover class to stretch the image full width in cards or other modules.

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">
    <div class="card-image image-cover">
        <img src="...">
    </div>
    <div class="card-box">...</div>
</div>

Using image-cover and position-over modifiers you can easily make the image be the background of the card or other modules.

Quotes

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>

Overlay #

If the text is not readable on the image when it is a cover, you can apply the built-in image-overlay modifiers. These modifiers apply a transparency background color or gradient over the image.

Quotes

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 image-overlay image-overlay-dark">
        <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>

By default, Superkube has two colors for overlay.


image-overlay-light: var(--palette-white-50);
image-overlay-dark: var(--palette-black-50);

You can add your own color or gradient to overlay by overriding the color variable and optionally opacity..


.image-overlay-primary {
    --image-overlay-opacity: .5;
    --image-overlay-color: var(--palette-primary-base);
}

.image-overlay-gr-primary {
    --image-overlay-opacity: .6;
    --image-overlay-color: linear-gradient(
        45deg,
        var(--palette-positive-base),
        var(--palette-primary-base)
    );
}

Now you have two new classes with the specified colors.

Quotes

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.

Quotes

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">
    <div class="card-image image-cover image-overlay image-overlay-primary">
        <img src="...">
    </div>
    <div class="card-box position-over">....</div>
</div>
<div class="card">
    <div class="card-image image-cover image-overlay image-overlay-gr-primary">
        <img src="...">
    </div>
    <div class="card-box position-over">....</div>
</div>

Size #

You can specify a specific image size. To do this, Superkube has set values in $scales.


// =Scales
$scales: (
    image: (
       16: 16px,
       24: 24px,
       32: 32px,
       48: 48px,
       64: 64px,
       128: 128px
    )
);

Use the image-{size} class to set the size.

Robots

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Author

<div class="card">
    <div class="card-category">...</div>
    <div class="card-head">...</div>
    <div class="card-body">...</div>
    <div class="card-author flex">
        <div class="card-author-avatar mr-3">
            <figure class="image-48">
                <img class="r-circle" src="...">
            </figure>
        </div>
        <div class="card-author-box">
            <div class="card-author-name">
                <a href="#" class="link-dark link-strong link-ghost">...</a>
            </div>
            <div class="card-author-position text-medium text-muted">...</div>
        </div>
    </div>
</div>

You can add your own image size by extending $scales. See also how to work with scales for modules.


// =Scales
$scales: map-extend($scales, (
    image: (
        256: 256px
    )
));

Superkube will automatically create a new size class with the specified value.


<img class="image-256" src="...">