Cards: Mobile Enhancements and style changes

[tmcconechy]

Describe the bug
Make some style changes to card exampes and make it work better on mobile. Based on Demo

https://main-enterprise.demo.design.infor.com/components/cards/example-variations-hitboxes.html

• 16px spacing on sides

Fixes
https://www.figma.com/file/2pHthwwOhchvnpFXp69O7H/IDS-Card?node-id=229%3A10946

• 16px spacing on sides on the card examples
• for the main card example it should look close to this:
• Change this in Web components too

**Additional context**

https://jira.infor.com/browse/UXD-2773

[janahintal]

Hi @ericangeles, I'm getting different side spaces for scenario 1 & 2. Can you confirm if it is the margin left & right is the one I should be testing for the spaces? I got different spaces on each size for scenario 1 & 2. Thanks!

1.) Test the basic card

Go to http://localhost:4000/components/cards/example-index
Check the .card-header
It should have 16px spaces on both sides

Result:
Margin Left = 16px
Margin Right = 2px

2.) Test the card variations

Go to http://localhost:4000/components/cards/example-variations-hitboxes.html
Card variations should have 16px space on both sides

Result: 0px Margin left and Right

3.) Test the swipe action - Passed

Go to http://localhost:4000/components/swipe-action/example-index.html
Toggle the device toolbar in the chrome dev tool
swipe action right button should have 5px border-radius (top right, bottom right) see the Figma design
swipe action left button should have 5px border-radius (top left, bottom left) see the Figma design
Swipe action (left and right) should be wider than before. See the Figma design
Swipe action icon should be 16px x 16px
The contents of it should always be centered
The second line should be truncated

[CindyMercadoReyes]

This issue is now resolved.