Card
Create layout boxes with different styles.
Usage
The Card component consists of the card itself and an optional card title, typically arranged in grid columns from the Grid component.
<vk-card>
<vk-card-title></vk-card-title>
</vk-card>Style modifiers
There are several styles to apply to a card by setting the type prop, as well as remove all styling.
| Class | Description |
|---|---|
default | Use this option to create a visually styled box. |
primary | Use this option to emphasize it with a primary color. |
secondary | Use this option to give it a secondary background color. |
blank | Use this option to remove all styling. |
<vk-card></vk-card>
<vk-card type="primary"></vk-card>
<vk-card type="secondary"></vk-card>
<vk-card type="blank"></vk-card>Hover modifier
To create a hover effect on the card, use the hover prop. This comes in handy when working with anchors and can be combined with the other card modifiers.
<div class="uk-card uk-card-hover"></div>Size modifiers
You can apply different size modifiers to cards that will decrease or increase their padding. Use small or large as option for the padding prop.
<vk-card padding="small"></vk-card>
<vk-card padding="large"></vk-card>Header & footer slots
With the header and footer slots you can also divide a card around the default body.
<vk-card>
<div slot="header">
<vk-card-title></vk-card-title>
</div>
<!-- default content -->
<div></div>
<div slot="footer"></div>
</vk-card>
Media slots
To display an image inside a card without any spacing, add one of the following classes to a <div> around the <img> element. Mind that you need to modify the source order accordingly.
| Class | Description |
|---|---|
media | This class indicates that the media element is aligned to the left. |
media-top | This class indicates that the media element is aligned to the top. |
media-bottom | This class indicates that the media element is aligned to the bottom. |
<vk-card>
<div slot="media-top">
<img src />
</div>
<div>...</div>
</vk-card>
Badge slot
To position a badge inside a card, place it under the badge slot. You can use one of the other components, for example the Label, to style the badge.
<vk-card>
<vk-label slot="badge"></vk-label>
</vk-card>Props
vk-card
| Name | Type | Default | Description |
|---|---|---|---|
type | String | -- | Style modifier with options as default, primary or secondary. |
padding | String | -- | Padding modifier with options as small or large. |
hover | Boolean | false | Enables the card hover effect. |
vk-card-title
| Name | Type | Default | Description |
|---|---|---|---|
tag | String | h3 | Allows more control over the final rendered HTML tag for the title element. |