Skip to main content
2.0.0Next2.0.92.0.82.0.72.0.62.0.52.0.42.0.32.0.22.0.12.0.01.0.0
Version: 2.0.0

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>
This is a card

Appearance

Headers

Use title and subheader to create a heading for a card.

The content of the 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.

Button inside card!
<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.

A card with a white indicatorA card with a red indicatorA card with a yellow indicator
<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.

A fluid card
<triton-card title="Fluid" fluid>
A fluid card
</triton-card>

Playground

Feedbackto the documentationis always appreciated ♥

API

Properties

PropertyDescriptionTypeDefault
fluidIf true the card will fill all avalible widthbooleantrue
subheaderA subordinate title of the card, giving additional infomation about its role or contentstring-
titleMain header of the cardstring-
indicatorA vertical colored bar on the left side of the card, indicating its statusbooleanfalse
indicator-colorThe color of the indicator. To be visible the indicator prop must be set to truestring-
sizeContent size of the card. Does not affect width or height of the card bodybase body large medium small tiny xlarge xxlarge xxxlargedefaultOptions.baseSize

Slots

Main

Main content

<triton-card>
<div></div>
</triton-card>

Footer content

<triton-card>
<div slot="footer"></div>
</triton-card>

Header content

<triton-card>
<div slot="header"></div>
</triton-card>

media

Media content

<triton-card>
<div slot="media"></div>
</triton-card>