How to remove borders and background from the card component using CSS

If you are in need to change the design of the card component, you can do that using a little bit of CSS code. 

  1. navigate to the step with the card component that you would like to edit
  2. add the Embedded Content component anywhere on your step - don't worry, it will be invisible and won't affect the rest of the step or flow
  3. copy and paste the following code to the Embedded Content component: 
<style>
.card-container > .card {
    background: transparent !important;
}
.light .card-group .card {
    border: var(--field-border-width) transparent;

</style>

This code above will remove the background and the border around the options of the card component for you. 

If you would like to change their color instead, you can do that by changing the word "transparent" in the code to the HEX color code of your choice.