Framework
The KL Profile Cards make use of Bootstrap 4's new .card component, so that's where we need to get started. Build a basic card to start with like the following:
<div class="card kl-card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Most of the magic happens with the super class .kl-card, which we need to add to the card like in the example above.
Card Blocks
To add blocks to your card, you need to include a div element with class .kl-card-block inside it. The KL card block has relative positioning and full width. You can add as many as you like, and they will sit below each other in a neat line. See the example below:
<div class="card kl-card">
<div class="kl-card-block">
</div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Card Block Sizing
You can control the sizing of a KL card block by adding a KL namespaced standard Bootstrap sizing class. E.g. kl-xs, kl-sm, kl-md, kl-lg, kl-xl and an extra large one with kl-xxl. Sizing has nothing to do with width, only with height. Here is a table to explain what heights you get with each size:
| Size | Height |
|---|---|
| No size | 3px |
| kl-xs | 15px |
| kl-sm | 50px |
| kl-md | 100px |
| kl-lg | 200px |
| kl-xl | 250px |
| kl-xxl | 300px |
Backgrounds
You can apply standard Bootstrap background classes to your KL card blocks such as bg-primary, bg-success if you want to, or you can manually set a background image with inline styles or your own custom CSS.
If you want an easy way of setting a background image, you can add a div with class kl-background inside a kl-card-block and add an image inside of that. We'll take care of the rest.
If you use the kl-background class it gets automatically pushed to the bottom of the stack (smallest z-index) no matter what position it appears inside your code, so it will never sit on top of your content.
<div class="card kl-card">
<div class="kl-card-block kl-xl">
<div class="kl-background">
<img src="https://www.lorempixel.com/250/250/nature">
</div>
</div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Card Avatars
You can't have a profile card without an avatar! Well you can, but that's just no fun at all. To add an avatar to your card use the kl-card-avatar class on an anchor element and put the image for the avatar inside of that. Like in the example below.
kl-card-block element.
<div class="card kl-card">
<div class="kl-card-block kl-xl">
<div class="kl-background">
<img src="https://www.lorempixel.com/250/250/nature">
</div>
<a class="kl-card-avatar">
<img src="https://www.lorempixel.com/100/100/people">
</a>
</div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Avatar Styles
We've put together some quick shape classes for you to get the ball rolling, but you can shape your avatar any way that you want to. If you can think of some interesting shapes that could enhance the options below send us a pull request.
| Shape Class | Output |
|---|---|
| Default |
|
| kl-b-rounded |
|
| kl-b-circle |
|
| kl-b-house |
|
| kl-b-shield |
|
| kl-b-corner |
|
| kl-b-corner-inverse |
|
| kl-b-ring |
|
| kl-b-ring-inverse |
|
| kl-b-lemon |
|
| kl-b-lemon-inverse |
|
You can customise the size of your avatars with the following classes. The size class should go directly onto the anchor with class kl-card-avatar, for something like this: <a class="kl-card-avatar kl-xl"><img src="https://www.lorempixel.com/100/100/people"></a>
| Shape Class | Output |
|---|---|
| Default |
|
| kl-xs |
|
| kl-b-sm |
|
| kl-b-md |
|
| kl-b-lg |
|
| kl-b-xl |
|
There are two parts to styling the borders of your avatars. First the colour and then the size. We offer standard Bootstrap colour classes, namespaced with 'kl-b-', for example kl-b-primary.
To handle the sizing of your avatars' borders we use a counter method class just like Bootstrap's utility margin classes like mt-4. Border colours and sizes must go on the <img> element to work, not the parent anchor.
| Size Class | Output |
|---|---|
| Default border size |
|
| kl-b-1 |
|
| kl-b-2 |
|
| kl-b-3 |
|
| kl-b-4 |
|
| kl-b-5 |
|
| kl-b-6 |
|
Who would we be if we didn't offer you some ready made examples to visualise the potential!. We've standardised the size for convenience.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Positioning
You can position your avatar (and anything else inside your kl-card-block elements by using our super simple positional utility classes. These classes need to go on block-level elements, not internal images or inline elements themselves.
| kl-ptl | kl-pt | kl-ptr |
| kl-pl | kl-pm | kl-pr |
| kl-pbl | kl-pb | kl-pbr |
Overflows
If you want to get a bit jazzy you can add extra positional classes to make your avatars (and other elements) overflow the edge of the kl-card-block it sits inside. The available classes are kl-pto,kl-prokl-pbokl-plo. They need to be used with their corresponding parent position classes, so you might have the following combination: kl-ptl kl-pto kl-plo. That combination would place an element in the top-left corner of its parent kl-card-block, and then overflow both top and left by 50%.
Here is the previous example with overflows:
| kl-ptl kl-pto kl-plo | kl-ptl kl-pto | kl-pt kl-pto | kl-ptr kl-pto | kl-ptr kl-pto kl-pro |
| kl-ptl kl-plo | kl-ptl | kl-pt | kl-pr | kl-pr kl-pro |
| kl-pl kl-plo | kl-pl | kl-pm | kl-pr | kl-pro |
| kl-pbl kl-plo | kl-pbl | kl-pb | kl-pbr | kl-pbr kl-pro |
| kl-pbl kl-pbo kl-plo | kl-pbl kl-pbo | kl-pb kl-pbo | kl-pbr kl-pbo | kl-pbr kl-pbo kl-pro |
KL Card Items
The elements inside of our kl-card-blocks need to have absolute positioning. To give you the chance to put whatever you want inside them, we've created the kl-card-item wrapper class. Simply add a div with this class inside a kl-card-block element and put whatever you want inside of it.
Just like with the avatar examples above, you can use our positional utility classes to put these items wherever you want them.
KL Card Social
KL Card Figure Block
Overlays
Everyone loves an overlay, so we've included them in the stylesheet and made them super simple to configure, with a range of different types to keep things funky! Overlays are block-level elements and need to sit inside a kl-card-block.
General Mark-up
Use the kl-card-overlay class to make a block inside your kl-card-block an overlay. Inside of this, you add elements with the class kl-card-overlay-item. The number of items is dependent on the type of overlay you want to have.
<div class="card kl-card">
<div class="kl-card-block kl-lg">
<div class="kl-card-overlay kl-card-overlay-block kl-top-in">
<div class="kl-card-overlay-item">
<div class="kl-card-overlay-item">
<div class="kl-card-overlay-item">
</div>
</div>
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Overlay Styles
To save you absolutely loads of time, we've put together some ready-made overlays to choose from. Awesome!
Simply apply the overlay style class e.g. kl-card-overlay-block to the kl-card-overlay element along with a directional class such as kl-top-in and then add the corresponding number of kl-card-overlay-items inside the overlay itself for the magic to happen. Here's a little table to explain the options and then some examples.
| Type | Class | Items | Directions |
|---|---|---|---|
| Block | kl-card-overlay-block | 1 | kl-top-in, kl-right-in, kl-bottom-in, kl-left-in |
| Split Horizontal | kl-card-overlay-split-h | 2 | -- |
| Split Horizontal 3 | kl-card-overlay-split-h-3 | 3 | kl-left-in, kl-right-in |
| Split Horizontal 4 | kl-card-overlay-split-h-4 | 4 | kl-left-in, kl-right-in |
| Split Vertical (curtains) | kl-card-overlay-split-v | 2 | -- |
| Split Vertical 3 | kl-card-overlay-split-v-3 | 3 | kl-top-in, kl-bottom-in |
| Split Vertical 4 | kl-card-overlay-split-v-4 | 4 | kl-top-in, kl-bottom-in |
| Split Quarters | kl-card-overlay-split-q | 4 | -- |
Block
Block
Block
Block
Split H
Split H 3
Split H 4
Split V
Split V 3
Split V 4
Split Q
Triggering Overlays
To make an overlay appear (or disappear) you need to add a trigger class of kl-overlay to a block-level parent element. Note that it does not have to be the direct parent element itself. Here are some examples for you:
<div class="card kl-card kl-overlay">
<div class="kl-card-block kl-lg">
<div class="kl-card-overlay kl-card-overlay-split-q">
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
</div>
<div class="kl-card-item kl-pm text-white kl-txt-shadow text-center">
<h3 class="mb-0">kl-card-overlay-split-q</h3>
<div class="text-white small"></div>
</div>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
</div>
kl-card-overlay-split-q
Hover Anywhere
With the kl-overlay class on the kl-card element itself, all overlays inside of it will get triggered when you hover over any part of the card.
<div class="card kl-card">
<div class="kl-card-block kl-lg kl-overlay">
<div class="kl-card-overlay kl-card-overlay-split-q">
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
</div>
<div class="kl-card-item kl-pm text-white kl-txt-shadow text-center">
<h3 class="mb-0">kl-card-overlay-split-q</h3>
<div class="text-white small"></div>
</div>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
</div>
kl-card-overlay-split-q
Hover Over Block
The kl-overlay class has been applied to the kl-card-block element at the top instead, so you must hover over the block itself to trigger the overlay.
Inverse Overlays
Sometimes you want your overlay to be visible by default and then disappear when hovered over right? No problem, we got you! Simply add the class kl-inverse to your kl-card-overlay element and it's all taken care of.
<div class="card kl-card kl-overlay">
<div class="kl-card-block kl-lg">
<div class="kl-card-overlay kl-card-overlay-split-q kl-inverse">
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
</div>
<div class="kl-card-item kl-pm text-white kl-txt-shadow text-center">
<h3 class="mb-0">kl-card-overlay-split-q</h3>
<div class="text-white small"></div>
</div>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
</div>
kl-card-overlay-split-q
Inverse Overlay
With the kl-inverse class on the kl-card-overlay element, the overlay will be visible by default, and then disappear when triggered.
Static Overlays
Sometimes you want an overlay to be visible but not disappear. We hear you! Simply add the class kl-static alongside the kl-inverse class to stop the overlay from disappearing.
<div class="card kl-card kl-overlay">
<div class="kl-card-block kl-lg">
<div class="kl-card-overlay kl-card-overlay-split-q kl-inverse kl-static">
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
</div>
<div class="kl-card-item kl-pm text-white kl-txt-shadow text-center">
<h3 class="mb-0">kl-card-overlay-split-q</h3>
<div class="text-white small"></div>
</div>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
<div class="kl-card-block kl-md">
<div class="kl-card-overlay kl-card-overlay-split-q kl-inverse">
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
<div class="kl-card-overlay-item"></div>
</div>
<div class="kl-card-item kl-pm text-white kl-txt-shadow text-center">
<h3 class="mb-0">kl-card-overlay-split-q</h3>
<div class="text-white small"></div>
</div>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
</div>
Static Overlay
Active Overlay
Static Overlays
With the kl-static class on the kl-card-overlay element, the overlay will not disappear when triggered.
kl-inverse class as well otherwise it won't be visible.kl-dark or kl-lite to the kl-card-overlay element to get a more or less transparent overlay.Transitions
Does this come with transitions? It sure does! We've got a few pre-made ones that you can apply to the elements of your cards to give them that funky flavour!
Transition Types
Here are some examples for you:
Reveal kl-reveal
Sets border-radius to 0.
Spin kl-spin
Spins the element 360deg
Show kl-show
Fades the element in
Hide kl-hide
Fades the element out
Shine kl-shine
Changes the element from grayscale to colour
Gray kl-gray
Changes the element from colour to grayscale
Slide In kl-slide-in
Slides the element into position (set position such as kl-pl)
Slide Out kl-slide-out
Slides the element out of the card (set position such as kl-pl)
Multiples
You can combine transitions to get even more interesting effects such as this one with spin and reveal.
Triggering Transitions
Just like with overlays, transitions need to be triggered with hovering. This system is extremely granular in that you can determine when element transitions are triggered by applying the transition classes to block-level elements or excluding them. See the 3 options below to understand further.
<div class="card kl-card kl-hide kl-spin">
<div class="kl-card-block kl-lg">
<a href="#" class="kl-card-avatar kl-lg kl-pm"><img class="kl-b-danger kl-b-lemon kl-b-3 kl-shadow kl-hide kl-spin" src="https://lorempixel.com/100/100/people"></a>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
</div>
Card Level
Adding the transition classes to the kl-card element will trigger any child elements with matching classes when the card itself is hovered over.
<div class="card kl-card">
<div class="kl-card-block kl-lg kl-hide kl-spin">
<a href="#" class="kl-card-avatar kl-lg kl-pm"><img class="kl-b-danger kl-b-lemon kl-b-3 kl-shadow kl-hide kl-spin" src="https://lorempixel.com/100/100/people"></a>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
</div>
Block Level
Adding the transition classes to a kl-card-block element will trigger any child elements with matching classes when the block is hovered over.
<div class="card kl-card">
<div class="kl-card-block kl-lg">
<a href="#" class="kl-card-avatar kl-lg kl-pm"><img class="kl-b-danger kl-b-lemon kl-b-3 kl-shadow kl-reveal kl-spin" src="https://lorempixel.com/100/100/people"></a>
<div class="kl-background">
<img src="https://www.lorempixel.com/300/300/nature">
</div>
</div>
</div>
Element Level
When you don't add transition classes to parent block-level elements, transitions will only be triggered when the element itself is hovered over.
Utility Classes
We've provided you with a few utility classes to easily make things a little bit funkier. Simply apply them to your elements to get some instant sparkle.
Shadows
Want to add some shadows to your blocks, elements and text? Here you go, nice and simple.
Add the class kl-shadow or one of its positonal variations to apply box-shadow to something.
- kl-shadow-t ~ top shadow
- kl-shadow-tr ~ top-right shadow
- kl-shadow-r ~ right shadow
- kl-shadow-br ~ bottom right shadow
- kl-shadow-b ~ bottom shadow
- kl-shadow-bl ~ bottom left shadow
- kl-shadow-l ~ left shadow
- kl-shadow-tl ~ top left shadow
You can also use the text shadow classes kl-txt-shadow and kl-txt-shadow-lite to add a bit of shadow to your text.
Horizontal Lines
We often use the following utility classes for horizontal lines to mix-up their width and placement. You can apply these styles to other elements if you want.
- qw ~ 1/4 width centered
- hw ~ 1/2 width centered
- tqw ~ 3/4 width centered