Divider Line or Horizontal Line between

my requirement is to show the line in between two components (As below sample pic)

I have tried with section layout but does not  suits for my requirement,

Any inputs  ...

  Discussion posts and replies are publicly visible

Parents
  • You could use two card layouts, set the 'marginBelow' on the first to "NONE" and configure the decorative bar to be at the bottom and the color of your choosing. For example:

    {
      a!cardLayout(
        contents: {},
        height: "MEDIUM",
        decorativeBarPosition: "BOTTOM",
        decorativeBarColor: "#FFFF00",
        marginBelow: "NONE",
        style: "CHARCOAL_SCHEME"
      ),
      a!cardLayout(
        contents: {},
        height: "MEDIUM",
        marginBelow: "STANDARD",
        style: "CHARCOAL_SCHEME"
      )
    }

    ....results in this:

Reply
  • You could use two card layouts, set the 'marginBelow' on the first to "NONE" and configure the decorative bar to be at the bottom and the color of your choosing. For example:

    {
      a!cardLayout(
        contents: {},
        height: "MEDIUM",
        decorativeBarPosition: "BOTTOM",
        decorativeBarColor: "#FFFF00",
        marginBelow: "NONE",
        style: "CHARCOAL_SCHEME"
      ),
      a!cardLayout(
        contents: {},
        height: "MEDIUM",
        marginBelow: "STANDARD",
        style: "CHARCOAL_SCHEME"
      )
    }

    ....results in this:

Children
No Data