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.
<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.
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 radius-base">
<div class="card-image radius-base image-cover">
<img class="radius-base" src="...">
</div>
<div class="card-box p-6 pb-10 position-over">
<div class="card-label 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.
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 radius-base">
<div class="card-image radius-base image-cover image-overlay image-overlay-dark">
<img class="radius-base" src="...">
</div>
<div class="card-box p-6 pb-10 position-over">
<div class="card-label 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 $colors map.
// =Colors
$colors: map-extend($colors, (
overlay: (
primary: (
color: var(--palette-primary-base),
opacity: .5
),
gradient-primary: (
color: linear-gradient(45deg, var(--palette-green-base), var(--palette-blue-base)),
opacity: .6
)
)
));
Or using CSS/SCSS:
.image-overlay-primary {
--image-overlay-opacity: .5;
--image-overlay-color: var(--palette-primary-base);
}
.image-overlay-gradient-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.
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.
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-gradient-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: (
32: 32px,
48: 48px,
64: 64px,
96: 96px,
128: 128px
)
);
Use the image-{size} class to set the size.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
<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="...">