Cards & Tiles

Cards and tiles are containers which can contain various content nested within their boundaries.

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.

-