Card Layout

Instead of card layout use a buttonarraylayout containg a button label as accept task 

a!buttonArrayLayout(
buttons: a!buttonWidget(
label: "Accept Tasks",
icon: "thumbs-o-up",
style: "PRIMARY",
value: "ACCEPT",
saveInto: local!acceptTask,
showWhen: count(
tointeger(local!gridSelection.selected)
) <= 50,
validate: false()
)
)

a!columnsLayout(
  columns: a!columnLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                tooltip: "Only Assigned Status Tasks will be processed",
                contents: {
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: { "ACCEPT TASK" },
                        color: "ACCENT",
                        style: { "STRONG" }
                      )
                    },
                    preventWrapping: false(),
                    align: "CENTER"
                  )
                },
                style: "ACCENT",
                padding: "NONE",
                link: a!dynamicLink(
                  value: "ACCEPT",
                  saveInto: local!acceptTask,
                  showWhen: count(
                    tointeger(local!gridSelection.selected)
                  ) <= 50
                ),
              )
            },
            width: "AUTO"
          ),
          a!columnLayout(contents: {})
        },
        spacing: "NONE"
      )
    },
    width: "NARROW"
  )
)

Hi Pavitra, Try to use this code and achieve your requirement if you have to use a card layout or else you can try to use buttonArrayLayout().

a!localVariables(
  local!gridSelection,
  local!acceptTask,
  a!columnLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            width: "1X",
            contents: {
              a!cardLayout(
                contents: a!richTextDisplayField(
                  value: {
                    a!richTextItem(
                      text: "ACCEPT TASKS",
                      color: "ACCENT",
                      style: "STRONG"
                    )
                  },
                  align: "CENTER"
                ),
                link: a!dynamicLink(
                  value: "ACCEPT",
                  saveInto: local!acceptTask,
                  showWhen: count(
                    tointeger(local!gridSelection.selected)
                  ) <= 50
                ),
                tooltip: "Only Assigned Status Tasks will be processed",
                style: "ACCENT",

              )
            }
          ),
          a!columnLayout(width: "7X", contents: {}),
          a!columnLayout(contents: {}, width: "5X", ),
          a!columnLayout(width: "1X", contents: {})
        }
      )
    },
    width: "EXTRA_NARROW"
  )
)

As indicated by others, best to use buttons for this.

Otherwise if you insist on using a cardLayout you can try setting the margins on the richTextDisplayField

a!localVariables(
  local!acceptTask,
  local!selected,
  a!columnLayout(
    contents: {
      a!cardLayout(
        tooltip: "Only Assigned Status Tasks will be processed",
        contents: a!richTextDisplayField(
          align: "CENTER",
          marginAbove: "NONE",
          marginBelow: "EVEN_LESS",
          value: {
            a!richTextItem(
              text: "ACCEPT TASKS",
              color: "ACCENT",
              style: "STRONG" 
            )
          }
        ),
        link: a!dynamicLink(
          value: "ACCEPT",
          saveInto: local!acceptTask,
          showWhen: count(tointeger(local!selected)) <= 50
        ),
        style: "ACCENT"
      )
    },
    width: "NARROW"
  )
)

Thanks everyone for the reply. I have used button for this requirement.