Installation
Coming soon..
Examples
<co-card article showHeader showFooter showActions>
<span slot="title"> Card Title </span>
<co-badge slot="badge" variant="default">Label</co-badge>
<co-icon-button
slot="icon"
size="large"
name="ellipses-horizontal"
variant="primary"
set="24"
label="ellipses-horizontal"
>
</co-icon-button>
<div slot="body">
This card has a header. You can put all sorts of things in it!
</div>
<footer slot="footer">
<div class="co-button-group">
<div class="co-button-group-pair">
<co-button variant="primary">Button</co-button>
<co-button variant="secondary">Button</co-button>
</div>
<co-button variant="tertiary">Cancel</co-button>
</div>
</footer>
</co-card>
Nested card
<co-card elevated showHeader showFooter showActions>
<span slot="title"> Card Title </span>
<co-badge slot="badge" variant="default">Label</co-badge>
<co-icon-button
slot="icon"
size="large"
name="ellipses-horizontal"
variant="primary"
set="24"
label="ellipses-horizontal"
></co-icon-button>
<div slot="body">
This card has a header. You can put all sorts of things in it!
</div>
<footer slot="footer">
<div class="co-button-group">
<div class="co-button-group-pair">
<co-button variant="primary">Button</co-button>
<co-button variant="secondary">Button</co-button>
</div>
<co-button variant="tertiary">Cancel</co-button>
</div>
</footer>
</co-card>
Elevated card
<co-card showHeader showFooter showActions>
<span slot="title">
This card has a header. You can put all sorts of things in it!. Cards
are a popular design pattern used in user interfaces to present
information or content in a structured format.
</span>
<co-badge slot="badge" variant="default">Label</co-badge>
<co-icon-button
slot="icon"
size="large"
name="ellipses-horizontal"
variant="primary"
set="24"
label="ellipses-horizontal"
></co-icon-button>
<div slot="body">
This card has a header. You can put all sorts of things in it!
</div>
<footer slot="footer">
<div class="co-button-group">
<div class="co-button-group-pair">
<co-button variant="primary">Button</co-button>
<co-button variant="secondary">Button</co-button>
</div>
<co-button variant="tertiary">Cancel</co-button>
</div>
</footer>
</co-card>
Nested card - large title
<co-card elevated>
<div slot="body">
This card has a header. You can put all sorts of things in it!. Cards
are a popular design pattern used in user interfaces to present
information or content in a structured format.This card has a header.
You can put all sorts of things in it!. Cards are a popular design
pattern used in user interfaces to present information or content in a
structured format.
</div>
</co-card>
Elevated card - without header & footer
<co-card showFooter>
<div slot="body">
<iframe
src="https://www.example.com"
title="W3Schools Free Online Web Tutorials"
style="width: var(--co-size-full); height: 15.625rem"
></iframe>
</div>
<footer slot="footer">
<div class="co-button-group">
<div class="co-button-group-pair">
<co-button variant="primary">Button</co-button>
<co-button variant="secondary">Button</co-button>
</div>
<co-button variant="tertiary">Cancel</co-button>
</div>
</footer>
</co-card>
Nested card - without header
<co-card elevated showHeader>
<span slot="title"> Card Title </span>
<div slot="body">
This card has a header. You can put all sorts of things in it!
</div>
</co-card>
Elevated card - without footer & actions
Properties
|
Property |
Type |
Description |
Usage |
|---|---|---|---|
|
elevated |
Boolean |
To raise the card by one level. |
elevated= true | false |
|
article |
Boolean |
Indicates whether the component represents an article or section. |
article= true | false |
|
showHeader |
Boolean |
To show/hide card header. |
showHeader= true | false |
|
showActions |
Boolean |
To show/hide card actions. |
showActions= true | false |
|
showFooter |
Boolean |
To show/hide card footer. |
showFooter= true | false |
|
slot=”title” |
- |
It is used to display the main title of the card. It should contain a short, descriptive heading for the card. |
- |
|
slot=”badge” |
- |
It is used to display a badge within the card, typically used for status indicators or labels. |
- |
|
slot=”icon” |
- |
It can be used to visually represent the content or category of the card. |
- |
|
slot=”body” |
- |
It is the main content of the card. It can contain the text, images, or other HTML elements that make up the card’s information. |
- |
|
slot=”footer” |
- |
It typically contains actions, links, or additional information related to the card content. |
- |