Attribute Card Component

Home
Essential Knowledge
By Type
Building Blocks
APIs
Releases

UI Component

Changed on:

30 Jan 2025

Overview

The Attribute Card implements the basic card that maps GraphQL responses onto a two-column card with keys on the left and values on the right.

Plugin Name	Core

The standard library of mystique components.

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.card.attribute, shared.components.material.DynamicCard (for backward compatibility with v1 manifests)

Detailed technical description

Most non-listing pages will contain several Attributes Cards to display the top-level information of an entity.

Properties

*Name*	*Type*	*Required*	*Default*	*Description*
title	`string`	❌		The Title text of the card.
highlight	`MystiqueThemeColor` / `string` (hex value)	❌		Show a coloured highlight above the card to denote status in cases like dashboard cards.
width	CardWidth ( `"quarter"` / `"third"` / `"half"` / `"two-thirds"` / `"full"` / `number` (1-12))	❌	full	Define the width of this card on a 12-column grid. Can use the named widths for readability or numbers directly. On mobile devices all widths will automatically change to 12 for the best responsive experience. Default is "full" and will take up the full width of the containing component.
attributes	`DynamicValue[]`	✅		List of key/value pairs to show on this card.
cardImage	`CardImageProps`	❌		Object containing image URL and dimensions (width and height) `{` ` "cardImage": {` ` "imageUrl": "String",` ` "width": Number,` ` "height": Number` ` }` `}`

Configuration example

1{
2  "component": "fc.card.attribute",
3  "dataSource": "orderById",
4  "props": {
5    "title": "i18n:fc.om.orders.detail.card.summary.title",
6    "width": "half",
7    "highlight": "#00FF00",
8    "cardImage": {
9      "imageUrl": "https://c.static-nike.com/a/images/f_auto,b_rgb:f5f5f5,w_440/skwgyqrbfzhu6uyeh0gg/air-max-270-shoe-nnTrqDGR.jpg",
10      "width": 100,
11      "height": 100
12    },
13    "attributes": [
14      {
15        "label": "i18n:fc.om.orders.detail.card.summary.attribute.orderType.label",
16        "value": "{{type}}"
17      },
18      {
19        "label": "i18n:fc.om.orders.detail.card.summary.attribute.orderStatus.label",
20        "value": "{{status}}"
21      },
22      {
23        "label": "i18n:fc.om.orders.detail.card.summary.attribute.creationDate.label",
24        "value": "{{formatDate createdOn day='numeric' month='numeric' year='numeric'}}"
25      }
26    ]
27  }
28}

Language: json

Version History

2023-07-28

v0.0.0

first release

Recommended Placement

None