On our UI, we are presenting the user his saved credit cards as a list of Card components, each saved card represented as a card. The user can save up to 5 cards which will be presented in two rows, as shown in mock:
I now want to add the option to edit a credit card which includes the following options:
- change expiry date
- delete card
- set as Active
On the card, there would be an "edit" option which will flip the card from view mode to edit mode. In this case, I'm facing a conflict. On one hand, I know that cards are mainly used for view mode and maybe some very few small actions. On the other hand, it's kind of weird to me that the card now also becomes a form. I'm not sure the user expect it to behave in this way. moreover, the form looks too compressed since we kept the size the same as in View mode.
I didn't find any information regarding Card component as an edit mode.
I guess my question is if this behavior doesn't validate the Card definition and whether or not the user expects to this kind of behavior. Any other suggestions?