Card
Cards are UI items which contain and display information to the user. Cards are normally used in multiples to display various items in a uniform way. An example of use is displaying products for sale, with a picture and some info for each product.
Basic Usage
<triton-card>
This is a card
</triton-card>
<TritonCard>
This is a card
</TritonCard>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-card>
This is a card
</triton-card>
</body>
</html>
Appearance
Headers
Use title and subheader to create a heading for a card.
<triton-card title="Card Title" subheader="Card subheader">
The content of the card
</triton-card>
Content
The TritonCard can contain other markup elements. One common usecase for this is a button inside the card. The Card also supports several slots.
<triton-card title="Card Title">
<triton-button>Button inside card!</triton-button>
</triton-card>
Indicator
The card can appear with an indicator on the left side.
The color of the indicator can also be set using the indicator-color property. Only a valid CSS color can be used.
<triton-card title="Card Title" indicator indicatorColor="#FFFFFF">
A card with a white indicator
</triton-card>
<triton-card title="Card Title" indicator indicatorColor="#FF0000">
A card with a red indicator
</triton-card>
<triton-card title="Card Title" indicator indicatorColor="#FFFF00">
A card with a yellow indicator
</triton-card>
Fluid Width
TritonCard also supports the fluid property, which allows it to fill the width of its container.
<triton-card title="Fluid" fluid>
A fluid card
</triton-card>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
elevation | Shadow applied to the card for elevation | 2 3 4 | - |
fluid | If true the card will fill all avalible width | boolean | true |
subheader | A subordinate title of the card, giving additional infomation about its role or content | string | - |
title | Main header of the card | string | - |
indicator | A vertical colored bar on the left side of the card, indicating its status | boolean | false |
indicator-color | The color of the indicator. To be visible the indicator prop must be set to true | string | - |
size | Content size of the card. Does not affect width or height of the card body | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
Slots
Main
Main content
<triton-card>
<div></div>
</triton-card>
footer
Footer content
<triton-card>
<div slot="footer"></div>
</triton-card>
header
Header content
<triton-card>
<div slot="header"></div>
</triton-card>
media
Media content
<triton-card>
<div slot="media"></div>
</triton-card>