Card
You can create a simple card by specifying the uc-card class.
1. Basic
It is a simple card composed of text and buttons.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!
<div class="uc-card">
<div class="uc-card-title">Simple card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
<div class="uc-btn _primary"><a href="#">Button</a></div>
</div>
2. Hover
It is a card that emerges when you hover the mouse cursor.
This is useful when you want to emphasize elements.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!
<div class="uc-card _hover">
<div class="uc-card-title">Simple card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
</div>
3. Float
It is a card that always emerges.
This is useful when you want to emphasize elements.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!
<div class="uc-card _float">
<div class="uc-card-title">Simple card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
<div class="uc-btn _primary"><a href="#">Button</a></div>
</div>
4. Banner
It is a card whose entire card is clickable.
<div class="uc-card _banner">
<a href="#">
<div class="uc-card-title">Banner card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
<div class="uc-btn _primary"><span>Button</span></div>
</a>
</div>
5. Cover Image
You can embed images in the card. Images are automatically trimmed and placed in the center.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!
<div class="uc-card">
<div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-card-title">Cover image card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
<div class="uc-btn _primary"><a href="#">Button</a></div>
</div>
6. Thumbnail
The image embedded in the card is resized to the thumbnail size and displayed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!
<div class="uc-card _thumb">
<div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-card-wrap">
<div class="uc-card-title">Thumb image card</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
<div class="uc-btn _primary"><a href="#">Button</a></div>
</div>
</div>
7. Layout
It has a structure inside the card, allowing for more complex styling.
You can easily create a profile card like the sample below.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!
<div class="uc-card">
<div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-card-header">
<div class="uc-card-icon" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-card-title">Layout card</div>
</div>
<div class="uc-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime commodi ipsum ab quam culpa. Repudiandae eius maiores necessitatibus!</p>
</div>
<div class="uc-card-footer">
<div class="uc-btn _primary"><a href="#">Button</a></div>
</div>
</div>