Modules
Card
This is the module and ways of working with cards.
Usage #
Superkube does not define card styles or blocks within cards.
Thus, you can make any card with any style and composition of blocks that you need.
The only rule that is defined in the module is position: relative
for the card
class.
The appearance of cards and blocks within them is defined by modifiers and other modules that are built into Superkube or created by you. Here's how to make a card with a border and background, as well as a card with a shadow that will contain several blocks inside.
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.
// Card with border
<div class="card b-dark-10 bg-light r-base">
<div class="card-image image-cover">
<img class="r-top-base" src="...">
</div>
<div class="card-box p-6 pb-10">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
</div>
// Card with shadow
<div class="card sh-200 bg-light r-base">
<div class="card-image image-cover">
<img class="r-top-base" src="...">
</div>
<div class="card-box p-6 pb-10">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
</div>
Spacing
The Spacing module helps you set padding within the card and its blocks, as well as define the margin between card blocks.
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.
// Regular spacing
<div class="card b-dark-10 p-6 bg-light r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
// Increased spacing
<div class="card b-dark-10 p-15 bg-light r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
Border
The Border module helps to show borders of the card or its blocks.
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.
// 1px border
<div class="card b-dark-10 p-6 bg-light r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
// 4px border
<div class="card b-dark-10 b-4 p-6 bg-light r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
Shadow
The Shadow module helps to show shadows of the card.
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.
// Small shadow
<div class="card sh-100 p-6 bg-light r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
// Big shadow
<div class="card sh-250 p-6 bg-light r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
Background
The Background module helps to set different backgrounds for cards.
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.
// Light background
<div class="card b-dark-7 p-6 bg-light r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
// Dark background
<div class="card p-6 bg-dark r-base">
<div class="card-caption mb-2">
<a href="#" class="caption caption-light">...</a>
</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>
Image #
The image in the card can be placed at the beginning, inside, left, right, as a cover and so on. Here are some typical examples.
Image at the beginning
To place the image at the beginning of the card, you need to make a card-image
block for the image and a card-box
for the rest of the content.
The block with an image can have an image-cover
modifier.
This will stretch the image to the full width of the card.
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 b-dark-10 bg-light r-base">
<div class="card-image image-cover">
<img class="r-top-base" src="...">
</div>
<div class="card-box p-6 pb-10">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
</div>
Image inside
When the image is inside the card content it does not require any additional modifiers. You just need to put the block with the image in the place of the card, where it is needed.
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 b-dark-10 p-6 pb-10 bg-light r-base">
<div class="card-image mb-5">
<img class="r-base" src="...">
</div>
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
Image left
To make the image to the left of the content, you need to apply a flex
modifier to the card.
And set a flex-shrink-off
modifier for the block with the image, so that the content block does not shrink it.
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 b-dark-10 bg-light r-base flex">
<div class="card-image image-cover flex-shrink-off">
<img class="r-left-base" src="...">
</div>
<div class="card-box p-6 pb-10">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
</div>
Image right
To make the image on the right, everything works the same as for the image on the left. You just need to put a block with an image after the content.
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 b-dark-10 bg-light r-base flex">
<div class="card-box p-6 pb-10">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
<div class="card-image image-cover flex-shrink-off">
<img class="r-right-base" src="...">
</div>
</div>
Image as cover
Using the modifiers of the image and position modules, you can easily make the image be the background of the card.
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>
Image as cover with overlay
If the text is not readable on the image when it is a cover, you can apply the built-in modifiers image-overlay or create your own. 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 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>
Image as cover for part of the card
The background image doesn't have to be for the whole card. Here is the solution for the card part.
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-light r-base">
<div class="card-box">
<div class="card-image r-base image-cover">
<img class="r-base" src="...">
</div>
<div class="card-section p-6 position-over">
<div class="card-caption mb-3">
<span class="label label-dark">...</span>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
</div>
</div>
<div class="card-body p-6">
<p class="text-medium">...</p>
</div>
</div>
Icon #
Icon at the beginning
The icon can be at the beginning of a card simply as a block, which contains an svg and using the icon module you can set the size of icon.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="card bg-light sh-150 p-8">
<div class="card-icon mb-5">
<span class="icon icon-64">
<svg></svg>
</span>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium text-moderated">...</p>
</div>
</div>
Icon left
To make the icon to the left of the content, you need to apply a flex
modifier to the card.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="card bg-light sh-150 p-8 flex">
<div class="card-icon mb-5 mr-5">
<span class="icon icon-48">
<svg></svg>
</span>
</div>
<div class="card-box">
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-2">
<p class="text-medium text-moderated">...</p>
</div>
</div>
</div>
Icon right
To place the icon on the right exactly the same, but the block with the icon must be placed after the content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="card bg-light sh-150 p-8 flex">
<div class="card-box">
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-2">
<p class="text-medium text-moderated">...</p>
</div>
</div>
<div class="card-icon mb-5 ml-5">
<span class="icon icon-48">
<svg></svg>
</span>
</div>
</div>
Link #
The link module has a link-stretched
modifier that stretches the link to the full width and height of the parent block with position: relative
.
So if this modifier is applied inside the card, the whole area of the card will be a clickable link.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="card bg-light sh-150 p-8">
<div class="card-head">
<h2 class="heading-medium">
<a href="#" class="link-stretched">...</a>
</h2>
</div>
<div class="card-body mt-2">
<p class="text-medium text-moderated">...</p>
</div>
</div>
Author #
Here's an example of how to make a card with an author block.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
<div class="card bg-light sh-100 r-base p-8">
<div class="card-category mb-2 text-medium text-muted row row-4 flex-baseline">
<a href="#" class="link-ghost">...</a>
<time>...</time>
</div>
<div class="card-head mb-2">
<h2 class="heading-medium"><a href="#">...</a></h2>
</div>
<div class="card-body mb-8">
<p class="text-moderated">...</p>
</div>
<div class="card-author flex">
<div class="card-author-avatar mr-3">
<figure class="image-48">
<img 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>
Meta #
Here is an example of how to create a block with meta data in the card, e.g. date, comments etc.
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-light r-base p-8">
<div class="card-caption mb-3">
<span class="label label-important">...</span>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
<div class="card-foot mt-5 text-small text-muted row row-4">
<time>...</time>
<span>
<a href="#" class="link-muted link-ghost">
<span class="icon icon-16">
<svg></svg>
</span>
20 comments
</a>
</span>
</div>
</div>
Flex
Using flex module you can make card blocks flex and then, for example, it will be possible to push a link or button in the card to the bottom edge.
Lorem ipsum dolor sit amet, conore 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 flex flex-column flex-auto sh-150 bg-light r-base">
<div class="card-image image-cover">
<img class="r-top-base" src="...">
</div>
<div class="card-box p-6">
<div class="card-caption mb-2">
<a href="#" class="caption caption-positive">...</a>
</div>
<div class="card-head">
<h2 class="heading-medium">
<a href="#">...</a>
</h2>
</div>
<div class="card-body mt-3">
<p class="text-medium">...</p>
</div>
</div>
<div class="card-cta p-6 mt-auto">
<p class="text-strong">
<a href="#" class="link-ghost link-block">
...
<span class="caret caret-right"></span>
</a>
</p>
</div>
</div>
Group #
Here are some ways to group the cards into a single composition.
Grid
Using the grid module you can arrange the cards in a grid.
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="grid">
<div class="column column-6 card sh-150 bg-light r-base">
<div class="card-image">...</div>
<div class="card-box">...</div>
</div>
<div class="column column-6 card sh-150 bg-light r-base">
<div class="card-image">...</div>
<div class="card-box">...</div>
</div>
</div>
Stack
Using the stack module you can arrange the cards vertically with the bottom spacing between them.
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="stack stack-6">
<div class="card b-dark-10 bg-light r-base flex">
<div class="card-image">...</div>
<div class="card-box">...</div>
</div>
<div class="card b-dark-10 bg-light r-base flex">
<div class="card-box">...</div>
<div class="card-image">...</div>
</div>
</div>
Row
Using the row module you can arrange the cards in the row with the gap between them.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="row row-6">
<div class="card bg-light sh-150 p-8">
<div class="card-head">...</div>
<div class="card-body">...</div>
</div>
...
</div>
Overflow
Using the flex-overflow
modifier you can make the cards overflow the row so that they can be scrolled horizontally in it.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="row row-6 flex-overflow">
<div class="card bg-light sh-150 p-6">
<div class="card-head">...</div>
<div class="card-body">...</div>
</div>
...
</div>