Components
card

7min
The card is a versatile and visually appealing UI element that encapsulates and presents information or interactive content in a structured, consistent, and user-friendly manner. It enhances the app's usability by organizing content into manageable, self-contained units that are easy to navigate and interact with. Each card typically includes a mix of text, images, and interactive elements, creating a self-contained unit of content. 
Cards
﻿
﻿Configuration options﻿
Some properties are common to all components, see Common component properties﻿ for a list and their configuration options.
﻿
Core structure
﻿
children
Configure a component or multiple components in a card. See Components﻿ for a list of available components. 
instanceId
Give the card component a unique id that can be referenced throughout the .
Other options
﻿
color
Sets the color of the card. Choose a color from the provided Jigx color palette﻿. Default color is white if the property is not specified in the YAML. 
style
When isDisabled is set to true, the card appears opaque, indicating that it is unavailable for selection. By default isDisabled is set to false.
Actions
﻿
onPress
Choose from the provided list of available actions, for example, use the go-to action to open a different .
Considerations
Jig-level: The card component is only available for use in a default﻿ .
Component-level: The carousel﻿ component has the option to use the card component within the carousel to create a visually appealing carousel.
﻿Examples and code snippets ﻿
Card containing a form
﻿
In this example the card component wraps the form component to create a visual container around the form. 
Example:
See the example in GitHub.
card-basic.jigx

title: Form in a card
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1682685797736-dabb341dc7de?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

onFocus: 
  type: action.reset-state
  options:
    state: =@ctx.components.hikerInfo-dd.state.data
    
children:
  - type: component.card
    options:
      children:
        - type: component.form
          instanceId: hikerInfo-dd
          options:
            isDiscardChangesAlertEnabled: false
            children:
              - type: component.text-field
                instanceId: name
                options:
                  label: Hiker's name
              - type: component.text-field
                instanceId: contact
                options:
                  label: Mobile number
              - type: component.media-field
                instanceId: photo
                options:
                  imageQuality: 80
                  imageCropping: 
                    width: 64
                    height: 64
                  label: Profile photo
                  mediaType: image

actions:
  - children:
       - type: action.execute-entity
         options:
          title: Create Record
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/hikers
          method: create
          data:
            name: =@ctx.components.name.state.value
            contact: =@ctx.components.contact.state.value
            photo: =@ctx.components.photo.state.value
          onSuccess: 
            type: action.go-back                                   
title: Form in a card
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1682685797736-dabb341dc7de?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

onFocus: 
  type: action.reset-state
  options:
    state: =@ctx.components.hikerInfo-dd.state.data
    
children:
  - type: component.card
    options:
      children:
        - type: component.form
          instanceId: hikerInfo-dd
          options:
            isDiscardChangesAlertEnabled: false
            children:
              - type: component.text-field
                instanceId: name
                options:
                  label: Hiker's name
              - type: component.text-field
                instanceId: contact
                options:
                  label: Mobile number
              - type: component.media-field
                instanceId: photo
                options:
                  imageQuality: 80
                  imageCropping: 
                    width: 64
                    height: 64
                  label: Profile photo
                  mediaType: image

actions:
  - children:
       - type: action.execute-entity
         options:
          title: Create Record
          provider: DATA_PROVIDER_DYNAMIC
          entity: default/hikers
          method: create
          data:
            name: =@ctx.components.name.state.value
            contact: =@ctx.components.contact.state.value
            photo: =@ctx.components.photo.state.value
          onSuccess: 
            type: action.go-back                                   
﻿
Carousel with card
﻿
In this example the carousel uses a card component with a color property, within the card, there is an image component used to display the images, an entity-field component to describe the product. The card component creates a visually appealing container for the images.  The pagination is configured outside of the carousel.
Example:
See the example in GitHub.
carousel-card.jigx
title: Carousel with card
type: jig.default

children:
  - type: component.carousel
    options:
      data: =@ctx.datasources.products-dynamic
      item: 
        type: component.card
        options:
          children:
            - type: component.image
              options:
                source:
                  uri: =@ctx.current.item.uri
            - type: component.entity
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Product
                      value: =@ctx.current.item.title 
          color: color1
      isContained: true
      pagination:
        isContained: false
        isHidden: false
        position: outside
      counter:
        isHidden: true
title: Carousel with card
type: jig.default

children:
  - type: component.carousel
    options:
      data: =@ctx.datasources.products-dynamic
      item: 
        type: component.card
        options:
          children:
            - type: component.image
              options:
                source:
                  uri: =@ctx.current.item.uri
            - type: component.entity
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Product
                      value: =@ctx.current.item.title 
          color: color1
      isContained: true
      pagination:
        isContained: false
        isHidden: false
        position: outside
      counter:
        isHidden: true
﻿
This example shows three cards.
The first card contains the avatar, expander, entity-field and location components with the color: color3 property.
The second card contains a line-chart component with the color: color14 property set.
The third card contains an image and entity-field components with the color: color6 property set.
Example:
See the example in GitHub.
Cards with color
﻿
card-color.jigx
users.jigx (datasource)
title: Cards with color
description: Card with color and multiple components
type: jig.default  

children:
  - type: component.card
    options:
      children:
        - type: component.avatar
          options:
            title: Customer
            uri: =@ctx.datasources.users[3].uri
            size: large
            align: center
        - type: component.expander
          options:
            header:
              centerElement: 
                type: component.titles
                options:
                  title: =@ctx.datasources.users[3].name
                  subtitle: =@ctx.datasources.users[3].position
            isInitiallyCollapsed: true
            onContentPress: 
              type: action.go-back
        
            children:
                  - type: component.location
                    options:
                      viewPoint:
                        centerPosition: middle
                        address: =@ctx.datasources.users[3].address
                        zoomLevel: 10                         
      color: color3
  - type: component.card
    options:
      children: 
      - type: component.line-chart
        options:
          chart:
            height: 150
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 8
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: =[{"x":"Q1/19", "y":25000, "color":"color2"}, {"x":"Q2/19", "y":32000, "color":"color2"}, {"x":"Q3/19", "y":45000, "color":"color2"}, {"x":"Q4/19", "y":86000, "color":"color2"}]
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true
            - data: =[{"x":"Q1/20", "y":12000, "color":"color3"}, {"x":"Q2/20", "y":48000, "color":"color3"}, {"x":"Q3/20", "y":36000, "color":"color3"}, {"x":"Q4/20", "y":120000, "color":"color3"}]
              name: Year 2020
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true      
          legend:
            isHidden: false
      color: color14
      
  - type: component.card
    options:
      children:
        - type: component.image
          options:
            height: 150
            source:
              uri: https://images.unsplash.com/photo-1504389557830-b293439b92d0?q=80&w=2580&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: Location
                  value: Cliff Edge lighthouse
      color: color6
  
title: Cards with color
description: Card with color and multiple components
type: jig.default  

children:
  - type: component.card
    options:
      children:
        - type: component.avatar
          options:
            title: Customer
            uri: =@ctx.datasources.users[3].uri
            size: large
            align: center
        - type: component.expander
          options:
            header:
              centerElement: 
                type: component.titles
                options:
                  title: =@ctx.datasources.users[3].name
                  subtitle: =@ctx.datasources.users[3].position
            isInitiallyCollapsed: true
            onContentPress: 
              type: action.go-back
        
            children:
                  - type: component.location
                    options:
                      viewPoint:
                        centerPosition: middle
                        address: =@ctx.datasources.users[3].address
                        zoomLevel: 10                         
      color: color3
  - type: component.card
    options:
      children: 
      - type: component.line-chart
        options:
          chart:
            height: 150
            isAnimated: true
          yAxis:
            min: 0
            labels:
              format:
                numberStyle: currency
                compactDisplay: short
                notation: compact
            tickAmount: 8
            isFirstTickHidden: true
            isFirstLabelHidden: true
          xAxis:
            categories:
              - Q1
              - Q2
              - Q3
              - Q4
          series:
            - data: =[{"x":"Q1/19", "y":25000, "color":"color2"}, {"x":"Q2/19", "y":32000, "color":"color2"}, {"x":"Q3/19", "y":45000, "color":"color2"}, {"x":"Q4/19", "y":86000, "color":"color2"}]
              name: Year 2019
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true
            - data: =[{"x":"Q1/20", "y":12000, "color":"color3"}, {"x":"Q2/20", "y":48000, "color":"color3"}, {"x":"Q3/20", "y":36000, "color":"color3"}, {"x":"Q4/20", "y":120000, "color":"color3"}]
              name: Year 2020
              animation:
                  direction: left-to-right
              layout: area-gradient
              dataLabels:
                - isEnabled: true      
          legend:
            isHidden: false
      color: color14
      
  - type: component.card
    options:
      children:
        - type: component.image
          options:
            height: 150
            source:
              uri: https://images.unsplash.com/photo-1504389557830-b293439b92d0?q=80&w=2580&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: Location
                  value: Cliff Edge lighthouse
      color: color6
  
﻿
Card with style
﻿
This  contains two cards, the first appears disabled using the isDisabled: true property and the second card the isDisabled property is set to false.
Example:
See the example in GitHub.
card-style.jigx
title: card style - disabled
type: jig.default

children:
  - type: component.section
    options:
      title: Card with style disabled
      children:
        - type: component.card
          instanceId: card-style
          options:
            color: color10
            style:
              isDisabled: true
            onPress: 
              type: action.go-back
            children:
              - type: component.image
                options:
                  source:
                    uri: https://images.unsplash.com/photo-1612539465222-c20af6006413?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

  - type: component.section
    options:
      title: Card with style enabled
      children:
        - type: component.card
          instanceId: card-enabled
          options:
            color: color10
            style:
              isDisabled: false
            onPress: 
              type: action.go-back
            children:
              - type: component.image
                options:
                  source:
                    uri: https://images.unsplash.com/photo-1612539465222-c20af6006413?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
                
title: card style - disabled
type: jig.default

children:
  - type: component.section
    options:
      title: Card with style disabled
      children:
        - type: component.card
          instanceId: card-style
          options:
            color: color10
            style:
              isDisabled: true
            onPress: 
              type: action.go-back
            children:
              - type: component.image
                options:
                  source:
                    uri: https://images.unsplash.com/photo-1612539465222-c20af6006413?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

  - type: component.section
    options:
      title: Card with style enabled
      children:
        - type: component.card
          instanceId: card-enabled
          options:
            color: color10
            style:
              isDisabled: false
            onPress: 
              type: action.go-back
            children:
              - type: component.image
                options:
                  source:
                    uri: https://images.unsplash.com/photo-1612539465222-c20af6006413?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
                
﻿
The card component can be configured with an onPress event. In this example when the card is pressed a go-to component is configured to take you to the product list  with items on sale.  
Example:
See the example in GitHub.
Card with onPress
﻿
card-onPress
title: card with onPress
type: jig.default

children:
  - type: component.card
    instanceId: card1
    options:
      color: color9
      onPress: 
        type: action.go-to
        options:
          linkTo: product-item-simple
      children:
        - type: component.image
          options:
            source:
              uri: https://images.unsplash.com/photo-1472851294608-062f824d29cc?q=80&w=2304&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: ''
                  value: Shop now
                  rightIcon: arrow-button-right-1
                
title: card with onPress
type: jig.default

children:
  - type: component.card
    instanceId: card1
    options:
      color: color9
      onPress: 
        type: action.go-to
        options:
          linkTo: product-item-simple
      children:
        - type: component.image
          options:
            source:
              uri: https://images.unsplash.com/photo-1472851294608-062f824d29cc?q=80&w=2304&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: ''
                  value: Shop now
                  rightIcon: arrow-button-right-1
                
﻿
﻿
Core structure
children	Configure a component or multiple components in a card. See Components for a list of available components.
instanceId	Give the card component a unique id that can be referenced throughout the .
Other options
color	Sets the color of the card. Choose a color from the provided Jigx color palette. Default color is white if the property is not specified in the YAML.
style	When isDisabled is set to true, the card appears opaque, indicating that it is unavailable for selection. By default isDisabled is set to false.