Card
Definition
<cst-card>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-access/>
<sub-header/>
<sub-body/>
<sub-options />
<sub-feature-flag/>
</cst-card>
OR
<cst-element name="card" schema="" schema-prop="" value=""/>
Example
<cst-card id="" value="">
<sub-theme name="" clr-var1="" clr-var2=""/>
<sub-font name="" font-var1="" font-var2=""/>
<sub-style name="" width="" height=""/>
<sub-access can-view="" can-modify=""/>
<sub-header text="" sub-text=""/>
<sub-body text=""/>
<sub-feature-flag>
</cst-card>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| class | string type | Specifies class to be applied(Multiple classes can be given with space). |
| object type | Specifies theme to be used for component. | |
| object type | Specifies fonts to be used for component. | |
| object type | Specifies style to be applied to component. | |
| object type | Specifies help icon to be displayed. | |
| object | Specifies what features to enable/disable. | |
| other | any type | Any other info. |
| schema | object type | Specifies JSON schema. |
| schema-prop | string type | Specifies property to be used to pick schema. |
Sub element attributes
sub-theme
| Property | Value | Description |
|---|---|---|
| name | primary(default)/secondary/custom | Name of the theme. |
| clr-label | string type | If custom then specific/ named color variables |
sub-font
| Property | Value | Description |
|---|---|---|
| name | roboto (default)/custom | Name of the font |
| font-text | string type | If custom then specific/ named font variables. |
| font-label | string type | |
| font-error | string type |
sub-style
| Property | Value | Description |
|---|---|---|
| name | material/skeuomorphic | Name of design to be used. |
| width | percentage/pixels/string(x-small,small,medium,large,x-large) | Gives width/any other prop value |
options
| Property | Value | Description |
|---|
feature-flag
| Property | Value | Description |
|---|
Schema Examples
Full schema
Fetch appropriate based on schemaProp
let schema = {
type: "object",
properties: {
cardData: {
type: "object",
cstAttr: {
elementName: 'card',
raw:{ //loop & add to element
class:'outline cst-class1',
},
subHeader: {
text: '',
subText: ''
},
subBody: {
text: ''
},
subStyle:{
name: '',
width:'',
height:'',
fontSize:''
},
subOptions:{
},
subFeature: {
},
subTheme:{
name:'',
clrLabel:''
},
subFont:{
name:'',
fontText:'',
fontLabel:'',
fontError:''
}
},
cstElm: {
buttons: [
{
type: "string",
title:"Read",
value: 'Read',
cstAttr: {
elementName: 'button',
},
{
type: "string",
title:"Bookmark",
value: 'Bookmark',
cstAttr: {
elementName: 'button',
}
}
}],
icons: [
{
type: "string",
title:"Favorite",
cstAttr: {
elementName: 'icon',
}
},
{
type: "string",
title:"Share",
cstAttr: {
elementName: 'icon',
}
}
],
headerImage: { // picture element schema
src:''
}
}
}
}
}
let schemaProp = 'cardData';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Exact schema
let schema = {
type: "string",
cstAttr: {
}
}
let schemaProp = '';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Nested object
Nested object schemaProp
let schema = {};
let schemaProp = 'EMDDetails.cardData';
var finalSchema = schema;
let schemaPropSplits = schemaProp.split('.');
for(let prop of schemaPropSplits){
finalSchema = finalSchema.properties[schemaProp];
}
Material Measurement Guidelines
Events
| Attribute | Description |
| onClick | Triggered when card is clicked. |
| onHover | Triggered when card is hovered. |
Event Method signature
method(parentRefObj, evtObj, elm, others)
Parameters description
| Parameter | Value | Description |
|---|---|---|
| parentRefObj | parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext } | Parent Context references |
| evtObj | object | Event object |
| elm | object | Element value |
| others | any | Other value |
Over-ridable Classes
- cst-ovr-card-elm
- cst-ovr-card
- cst-ovr-card-header
- cst-ovr-card-header-text
- cst-ovr-card-header-sub-text
- cst-ovr-card-body
- cst-ovr-card-footer
Unit test Screenshots
Responsiveness Test Screenshots
Design Images
Demo link
Points
- Clickable card?
- unit test screen shots
- ui + responsive test screen shots
- component demo link
- bring designer's images in docs