ESY-6582 Update component Card with image properties

_includes/card.html

@@ -2,6 +2,8 @@
 **Parameters
 title(required): Title of the card
 title_type: Determines size of the title
+image_src: Image source for the card
+image_alt_text: Alt text for the image
 icon_content: Used to generate content of dx-card-icon
 icon_outlined: Make icon_content outlined if icon_content is material-icon
 icon_svg: Handles value of icon_content as a reference to a svg-file
@@ -13,6 +15,9 @@
 {%- endcomment -%}
 
 {% assign title_type = include.title_type | default: 'h4', %}
+{% assign image_src = include.image_src %}
+{% assign image_alt_text = include.image_alt_text %}
+{% assign image_ratio = 'ratio-16-9'}
 {% assign icon_content = include.icon_content %}
 {% assign icon_outlined = include.icon_outlined | default: false %}
 {% assign icon_svg = include.icon_svg | default: false %}
@@ -37,11 +42,16 @@
 {% assign card_class = 'cards cards-primary ' | append: type_class | strip %}
 {% if horizontal %}
 {% assign card_class = card_class | append: ' cards-wide' | strip %}
+{% assign image_ratio = '1' %}
 {% endif %}
 
 {% capture card_attributes %}href="{{ to }}"{% endcapture %}
 
 <a {{ card_attributes }} class="{{ card_class }}">
+    {% if image_src %}
+    <img src="{{image_src}}" alt="{{image_alt_text}}" class="{{image_ratio}}" />    
+    {% endif %}
+
     {% if icon_svg %}
     <div class="cards-icon">
         {% include {{ icon_content }} %}