Card

Overview

The Card component is a versatile UI element designed to present content in a clean, organized manner. It serves as a container for various types of content such as text, images, etc. The Card's design is intentionally crafted to blend harmoniously with its surrounding interface, making it an integral part of the overall user experience. The Card component is highly customizable, allowing you to adjust its appearance to suit your specific design requirements.

Sample JSON

card.json

{
  "type": "card",
  "data": {
    "child": {
      "type": "text",
      "data": { "text": "Hello World" },
      "style": {
        "fontStyle": "heading1",
        "fontSize": 18,
        "fontColor": "ff0000",
        "fontColorDark": "FFC0CB",
        "fontWeight": "bold",
        "maxLines": 2,
        "padding": { 
          "top": 0, 
          "bottom": 0, 
          "left": 10, 
          "right": 10 
        }
      }
    }
  },
  "style": {
    "backgroundColor": "fefefe",
    "backgroundColorDark": "1a1a1a",
    "borderColor": "ffffff",
    "borderColorDark": "000000",
    "borderWidth": 0,
    "elevation": 0,
    "borderRadius": 8,
    "shadowColor": "000000",
    "shadowColorDark": "ffffff",
    "shadowRadius": 0,
    "height": 100,
    "padding": { 
      "top": 5, 
      "right": 0, 
      "bottom": 5, 
      "left": 0 
    }
  }
}

This results in the following output:

Hello World

In this example, the Card component displays the text "Hello World" with the following style properties:

• backgroundColor: "fefefe" - This sets the background color of the card to a very light grey (almost white) in light mode.
• backgroundColorDark: "1a1a1a" - In dark mode, the card's background color changes to a very dark grey, almost black.
• borderColor: "ffffff" - The border color of the card is set to white. However, since the borderWidth is 0, this property might not have any visible effect.
• borderColorDark: "000000" - In dark mode, the border color is set to black, which also might not be visible due to the 0 borderWidth.
• borderWidth: 0 - Specifies that the card should have no border width, effectively making the border invisible.
• elevation: 0 - This indicates that the card has no elevation or shadow in light mode, giving it a flat appearance.
• borderRadius: 8 - The corners of the card are rounded with a radius of 8 logical pixels, giving it a softer, more modern look.
• shadowColor: "000000" - The shadow color is set to black, but with a shadow radius of 0, this means there will be no visible shadow in light mode.
• shadowColorDark: "ffffff" - In dark mode, the shadow color is set to white. However, similar to the light mode, the shadow will not be visible due to the 0 shadow radius.
• shadowRadius: 0 - Indicates that the card should have no shadow, contributing to a flat design aesthetic.
• height: 100 - The card is set to have a fixed height of 100 logical pixels.
• padding: Specifies the padding inside the card, with 5 logical pixels on the top and bottom, and no padding (0) on the left and right.

Data Properties

The data properties define the content of the Card component. The following table lists the available data properties for the Card component:

Property	Type	Required	Description
child	JSON Object	true	The component to be displayed inside the card.

child

• Type: JSON Object (optional)
• Description: Specifies a JSON object for embedding diverse UI components within the card, enabling customizable and complex layouts for dynamic content presentation.

Style Properties (Optional)

Style properties allow you to customize the appearance of the Card component.

info

The style properties are optional. If you don't specify any style properties, the component will use the default values.

The following table lists the available style properties for the Card component:

Property	Type	Platform	Required	Description
borderRadius	Float	android, iOS	false	An immutable set of radii for each corner of a rectangle.
borderColor	String	android, iOS	false	The color of the border.
borderColorDark	String	android, iOS	false	The color of the border in dark mode.
borderWidth	Float	android, iOS	false	The width of the border, in logical pixels.
backgroundColor	String	android, iOS	false	The card's background color.
backgroundColorDark	String	android, iOS	false	The card's background color in dark mode.
height	Float	android, iOS	false	The height of the card.
width	Float	android, iOS	false	The width of the card.
shadowColor	String	iOS	false	The color to paint the shadow below the card.
shadowColorDark	String	iOS	false	The color to paint the shadow below the card in dark mode.
shadowRadius	Float	iOS	false	A measure of how much to blur the shadow. Larger values result in more blur.
cardY	Float	iOS	false	An amount to offset the shadow vertically from the view.
padding	JSON	android, iOS	false	The space around the component while rendering.
elevation	Float	android	false	Specifies the elevation of the card, creating a shadow below it.

borderRadius

• Type: Float (optional)
• Description: An immutable set of radii for each corner of a rectangle.

borderColor

• Type: String (optional)
• Description: The color of the border.

borderColorDark

• Type: String (optional)
• Description: The color of the border in dark mode.

borderWidth

• Type: Float (optional)
• Description: The width of the border, in logical pixels.

backgroundColor

• Type: String (optional)
• Description: The card's background color.

backgroundColorDark

• Type: String (optional)
• Description: The card's background color in dark mode.

height

• Type: Float (optional)
• Description: The height of the card.

width

• Type: Float (optional)
• Description: The width of the card.

shadowColor

• Type: String (optional)
• Description: The color to paint the shadow below the card.

shadowColorDark

• Type: String (optional)
• Description: The color to paint the shadow below the card in dark mode.

shadowRadius

• Type: Float (optional)
• Description: A measure of how much to blur the shadow. Larger values result in more blur.

cardY

• Type: Float (optional)
• Description: An amount to offset the shadow vertically from the view.

padding

• Type: JSON (optional)
• Description: Defines the space around the component. The padding is specified for top, bottom, left,

and right individually. Each subproperty is an integer representing the number of logical pixels for the padding.

• top: The space above the component.
• bottom: The space below the component.
• left: The space to the left of the component.
• right: The space to the right of the component.

elevation

• Type: Float (optional)
• Platform: android
• Description: Specifies the elevation of the card, creating a shadow below it. The elevation property controls the depth of the card's shadow, giving it a raised appearance. Larger values indicate a higher elevation, resulting in a more pronounced shadow. This property is specific to Android and does not affect the card's appearance on iOS.