Card (Alpha)

This feature is currently in its Alpha stage of development.

• As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.

• In this phase, the feature may contain bugs or behave unpredictably.

• Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.

• We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.

The card component adds context or highlights information in the jig. The card itself is a container with integrated padding, background, and row rules, meaning every component placed in the card will be represented as a separate row with spaces between the rows.

For steps on creating a custom component, see How to create a custom component.

Configuration options

You can use when and instanceId with component.card, add the properties before the options property. The available list of options is shown below.

Options	Value
color	Multiple, use IntelliSense to view the available list.
direction	row - creates a vertical layout in a row. column - creates a horizontal layout in a column.
emphasis	extra-low, low, low-medium, medium, high
onPress	Multiple, use IntelliSense to view the available list of . The action is called when the card is pressed.
style	isDisabled - true or false

Considerations

• The card component has predefined behavior for its children, ensuring the children's components, such as images, are flexible by default.

• The View (Alpha) component combined with the card enables the precision of the layout design. For example, the view can be used to create rows to contain cards and provide spacing between the cards.

• When using component.image on custom components, the isFlexible property is available. If the property is set to true the image will take the parent's space. If the parent has zero height or zero width, the image will not render. It would be best if you decided either to set the height and width on the image or set isFlexible to true.

• The recommended approach when using component.image is to use component view as a wrapper component with a defined height, e.g., 100, and setting isFlexible: true for each image. This allows the images to grow into the parent component space.

• By default, children components are stacked in a column.

Example and code snippets

Card

This example shows a basic component.card containing a component.image. A component.view is used to create the layout of a row under the card containing the icons, and text components.

Examples:

1. See the custom component example in GitHub.

2. See the jig example in GitHub.

Card with icon & text

card2.jigx

# components/card2.jigx
type: component.default

children:      
  - type: component.card
    options:
      direction: column
      children:
        - type: component.image
          options:
            source:
              uri: https://plus.unsplash.com/premium_photo-1675826774817-fe983ceb0475?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80
        - type: component.view
          options:
            style:
              flex: 
                direction: row
                grow: 1
              gap: small
              justifyContent: center              
            children:     
              # Left element
              - type: component.icon
                options:
                  icon: ag                      
              # Content            
              - type: component.view
                options:
                  style:
                    flex: 
                      direction: column
                      grow: 1
                    justifyContent: center              
                  children:
                    # Title
                    - type: component.text
                      options:
                        value: Title
                        size: medium    
                        align: left
                        weight: extra-bold
                    # Subtitle 
                    - type: component.text
                      options:
                        value: Subtitle
                        size: regular
                        align: left
                        emphasis: high
                    # Description 
                    - type: component.text
                      options:
                        value: Description
                        size: small
                        align: left   
                        emphasis: high
                    
              # Right element
              - type: component.icon
                options:
                  icon: arrow-right  

card-example2.jigx

Cards with images

This example shows creating a custom component using the card and image components. The view component creates the screen layout of columns and rows.

Examples:

1. See the custom component example in GitHub.

2. See the jig example in GitHub.

Cards with images

cards-images.jigx

# components/cards-images.jigx
type: component.default
children:
# Use the view component to create the screen layout of columns and rows,
# and padding between the card rows.
- type: component.view
  options:
    style:
      flex: 
        direction: column
        grow: 1
      gap: medium
    children:  
      # One card in a column 
      - type: component.card
        options:
          direction: column
          children:
      # Add the image component    
            - type: component.image
              options:
                source:
                  uri: https://t14345253.p.clickup-attachments.com/t14345253/18ebe021-fdd9-4695-b04d-88ddf0ba08f4/package.png?view=open
                height: 56
                resizeMode: contain
            - type: component.text
              options:
                value: Package
                weight: bold
                align: center      
      # Two cards in a row with a medium gap between the rows
      - type: component.view
        options:
          style:
            flex: 
              direction: row
              grow: 1
            gap: medium
          children:     
            - type: component.card
              options:
                direction: column
                children:
                  - type: component.image
                    options:
                      source:
                        uri: https://t14345253.p.clickup-attachments.com/t14345253/3debc4ea-aa07-48e5-9cec-17253988a98c/luggage.png
                      height: 56                       
                      resizeMode: contain
                  - type: component.text
                    options:
                      value: Ride
                      weight: bold
                      align: left     
            - type: component.card
              options:
                direction: column
                children:
                  - type: component.image
                    options:
                      source:
                        uri: https://t14345253.p.clickup-attachments.com/t14345253/18ebe021-fdd9-4695-b04d-88ddf0ba08f4/package.png?view=open
                      height: 56
                      resizeMode: contain
                  - type: component.text
                    options:
                      value: Package
                      weight: bold
                      align: left                               

      # Three cards in a row with a minimal gap between the rows
      - type: component.view
        options:
          style:
            flex: 
              direction: row
              grow: 1
            gap: medium
          children:
            - type: component.view
              options:
                style:
                  flex: 
                    direction: column
                    grow: 1
                    basis: 1
                  gap: minimal
                children:
                  - type: component.card
                    options:
                      children:
                        - type: component.image
                          options:
                            source:
                              uri: https://t14345253.p.clickup-attachments.com/t14345253/482e8b4f-9580-4f2a-b724-3afaef94e66f/reserve.png
                            height: 48
                            resizeMode: contain
                  - type: component.text
                    options:
                      value: Reserve
                      weight: bold
                      align: center
                      size: small       
            - type: component.view
              options:
                style:
                  flex: 
                    direction: column
                    grow: 1
                    basis: 1
                  gap: minimal
                children:
                  - type: component.card
                    options:
                      children:
                        - type: component.image
                          options:
                            source:
                              uri: https://t14345253.p.clickup-attachments.com/t14345253/18ebe021-fdd9-4695-b04d-88ddf0ba08f4/package.png?view=open
                            height: 48
                            resizeMode: contain
                  - type: component.text
                    options:
                      value: Hourly
                      weight: bold
                      align: center
                      size: small       
            - type: component.view
              options:
                style:
                  flex: 
                    direction: column
                    grow: 1
                    basis: 1                    
                  gap: minimal
                children:
                  - type: component.card
                    options:
                      children:
                        - type: component.image
                          options:
                            source:
                              uri: https://t14345253.p.clickup-attachments.com/t14345253/3debc4ea-aa07-48e5-9cec-17253988a98c/luggage.png
                            height: 48
                            resizeMode: contain
                  - type: component.text
                    options:
                      value: Rent
                      weight: bold
                      align: center
                      size: small       
      # Four cards
      - type: component.view
        options:
          style:
            flex: 
              direction: row
              grow: 1
            gap: medium
          children:
            - type: component.view
              options:
                style:
                  flex: 
                    direction: column
                    grow: 1
                    basis: 1
                  gap: minimal
                children:
                  - type: component.card
                    options:
                      children:
                        - type: component.image
                          options:
                            source:
                              uri: https://t14345253.p.clickup-attachments.com/t14345253/3debc4ea-aa07-48e5-9cec-17253988a98c/luggage.png
                            height: 48
                            resizeMode: contain
                  - type: component.text
                    options:
                      value: Travel
                      weight: bold
                      align: center
                      size: small       
            - type: component.view
              options:
                style:
                  flex: 
                    direction: column
                    grow: 1
                    basis: 1
                  gap: minimal
                children:
                  - type: component.card
                    options:
                      children:
                        - type: component.image
                          options:
                            source:
                              uri: https://t14345253.p.clickup-attachments.com/t14345253/482e8b4f-9580-4f2a-b724-3afaef94e66f/reserve.png
                            height: 48
                            resizeMode: contain
                  - type: component.text
                    options:
                      value: Transit
                      weight: bold
                      align: center
                      size: small       
            - type: component.view
              options:
                style:
                  flex: 
                    direction: column
                    grow: 1
                    basis: 1
                  gap: minimal
                children:
                  - type: component.card
                    options:
                      children:
                        - type: component.image
                          options:
                            source:
                              uri: https://t14345253.p.clickup-attachments.com/t14345253/18ebe021-fdd9-4695-b04d-88ddf0ba08f4/package.png?view=open
                            height: 48
                            resizeMode: contain
                  - type: component.text
                    options:
                      value: Charter
                      weight: bold
                      align: center
                      size: small       
            - type: component.view
              options:
                style:
                  flex: 
                    direction: column
                    grow: 1
                    basis: 1
                  gap: minimal
                children:
                  - type: component.card
                    options:
                      children:
                        - type: component.image
                          options:
                            source:
                              uri: https://t14345253.p.clickup-attachments.com/t14345253/3debc4ea-aa07-48e5-9cec-17253988a98c/luggage.png
                            height: 48
                            resizeMode: contain
                  - type: component.text
                    options:
                      value: Explore
                      weight: bold
                      align: center
                      size: small          

cards-image.jigx

Cards in a list

This example shows how to use the component.card in a component.list. In the card is an image and view component. the view is used to create the layout positions for the icon, text, and button components below the image.

Examples:

1. See the custom component example in GitHub.

2. See the jig example in GitHub.

List of cards

cards-list.jigx

# components/cards-list.jigx   
type: component.default
children:  
# Wrap the images in a card. 
  - type: component.card
    options:
      children:     
      - type: component.image
        options:
          source:
            uri: https://images.unsplash.com/photo-1581235720704-06d3acfcb36f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80 
      # Use the view component to create the screen layout of rows,
      # and padding between the card rows.    
      - type: component.view
        options:
          style:
            padding: 
              bottom: medium
              horizontal: medium
          children:
            # Use the view to add a row in the card and place the icon and 
            # button in the row.          
            - type: component.view
              options:
                style:
                  alignItems: center
                  flex: 
                    direction: row
                    grow: 1
                  gap: small
                  justifyContent: space-between                
                children:             
                  - type: component.icon
                    options:
                     icon: [email protected]
                  - type: component.text
                    options:
                     align: left
                     size: medium
                     value: [email protected]
                     weight: extra-bold 
                  - type: component.text
                    options:
                      align: left
                      emphasis: medium
                      size: small
                      value: [email protected]  
                  - type: component.button
                    options:
                      title: [email protected]
                      isCompact: true
                      onPress:
                        type: action.go-back
                      type: primary 

cards-in-list.jigx

Card with charts

Chart in a card

This example demonstrates how to show a line-chart component in a component.card. Take note of how the layout configuration is created by using the component.view multiple times and even inside another component.view. In the jig configuration inputs are required for the chart in the custom component to reference the datasource.

Examples:

1. See the custom component example in GitHub

2. See the jig example in GitHub.

cards-chart.jigx

# components/cards-chart.jigx
type: component.default
children:
- type: component.view
  options:
    style:
      flex: 
        direction: column
        grow: 1
      gap: medium
    children: 
      # One card
      - type: component.card
        options:
          direction: column
          children:
            - type: component.view
              options:
                style:
                  flex: 
                    grow: 1
                    direction: row
                  justifyContent: space-between
                  alignItems: center
                  gap: small
                children:
                  # Content     
                  - type: component.view
                    options:
                      style:
                        flex: 
                          grow: 1
                          direction: column
                        gap: small
                      children:
                        - type: component.text
                          options:
                            value: [email protected]
                            align: left
                            size: medium
                            weight: extra-bold
                        - type: component.view
                          options:
                            style:
                              flex: 
                                grow: 1
                                direction: column
                              gap: minimal
                            children:                            
                              - type: component.text
                                options:
                                  value: [email protected]
                                  align: left
                                  size: small
                              - type: component.text
                                options:
                                  value: [email protected]
                                  align: left
                                  size: small
                                  emphasis: medium                            
                  
            - type: component.line-chart
              options:
                plotOptions:
                  series:
                    marker:
                      isHidden: true
                yAxis:
                  min: 0
                  labels:
                    format:
                      compactDisplay: short
                      notation: compact
                      numberStyle: currency  
                xAxis:
                  categories:
                    - "Jan"
                    - "Feb"
                    - "Mar"
                    - "Apr"
                  labels:
                    format:
                      compactDisplay: short
                      notation: compact
                      numberStyle: currency
                series:
                  - data: [email protected]
                    layout: area-gradient
                    animation:
                      direction: bottom-to-top
                    color: [email protected]
                  - data: [email protected]
                    layout: area-gradient
                    animation:
                      direction: bottom-to-top
                    color: [email protected]
                  - data: [email protected]
                    layout: area-gradient
                    animation:
                      direction: bottom-to-top
                    color: [email protected]
            - type: component.view
              options:
                style:
                  flex:                 
                    direction: row
                    grow: 0
                  gap: regular
                  alignItems: flex-start
                children:
                  # Content     
                  - type: component.view
                    options:
                      style:
                        flex: 
                          direction: row
                        alignItems: center
                        gap: small
                      children:
                        - type: component.view
                          options:
                            style:
                              height: 16
                              width: 16
                              radius: tiny
                              background:
                                color: [email protected]
                            children:
                              - type: component.avatar
                                options:
                                  title: test
                                when: false                       
                        - type: component.text
                          options:
                            value: Year 2023
                            align: left
                            size: small
                            emphasis: medium                            
                  - type: component.view
                    options:
                      style:
                        flex:                         
                          direction: row
                        alignItems: center
                        gap: small
                      children:
                        - type: component.view
                          options:
                            style:
                              height: 16
                              width: 16
                              radius: tiny
                              background:
                                color: [email protected]
                            children:
                              - type: component.avatar
                                options:
                                  title: test
                                when: false
                        - type: component.text
                          options:
                            value: Year 2022
                            align: left
                            size: small
                            emphasis: medium           

cards-example3.jigx

Multiple horizontal cards

This example demonstrates how to use the view component to create the row layout for multiple card components to create three cards displayed horizontally.

Take note of how the layout configuration is created by using the view component multiple times and even inside the card to create the correct layout for the icon and text components.

Examples:

1. See the custom component example in GitHub.

2. See the jig example in GitHub.

Multiple cards shown horizontally

cards.jigx

# components/cards.jigx
type: component.default
children:
# Create 1 row
  - type: component.view
    options:
      style:
        flex: 
          direction: row
          grow: 1
        gap: medium
      # Add the first card to the row        
      children:
        - type: component.card
          options:
            color: color6
            children:
              # Use the view inside the card to create the layout of the icons
              # and text.            
              - type: component.view
                options:
                  style:
                    alignItems: flex-start
                    gap: regular
                  children:
                    - type: component.icon
                      options:
                        icon: alarm-bell
                    - type: component.view
                      options:
                        style: 
                          gap: minimal
                        children:
                          - type: component.text
                            options:
                              value: Title
                              weight: bold
                              size: medium
                          - type: component.text
                            options:
                              value: Subtitle
                              emphasis: medium
                              size: small
        # Add the second card.
        - type: component.card
          options:
            color: color12
            children:
              - type: component.view
                options:
                  style:
                    alignItems: center
                    gap: regular
                  children:
                    - type: component.icon
                      options:
                        icon: attachment
                    - type: component.view
                      options:
                        style: 
                          gap: minimal
                        children:
                          - type: component.text
                            options:
                              value: Title
                              weight: bold
                              align: center
                              size: medium
                          - type: component.text
                            options:
                              value: Subtitle
                              emphasis: medium
                              align: center
                              size: small
        # Add the third card.
        - type: component.card
          options:
            color: color9
            children:
              - type: component.view
                options:
                  style:
                    alignItems: flex-end
                    gap: regular
                  children:
                    - type: component.view
                      options:
                        style:
                          padding: 
                            right: small
                        children:
                          - type: component.icon
                            options:
                              icon: calendar
                    - type: component.view
                      options:
                        style: 
                          gap: minimal
                        children:
                          - type: component.text
                            options:
                              value: Title
                              weight: bold
                              size: medium   
                          - type: component.text
                            options:
                              value: Subtitle
                              emphasis: medium                      
                              size: small   

cards3.jigx

Other card examples

Explore a variety of additional code examples demonstrating the use of the card component on GitHub. These examples showcase different configurations and use cases to help you get the most out of the card component.

• Card Example 1

• Cards with graph

• Cards-Flip

• Cards Next Step

• Cards (Two)

• Cards with Case Actions

• Cards with Case Actions 1