From 57d9f17449209933a1ee8c429c013676164b85cc Mon Sep 17 00:00:00 2001
From: Martina Lilja <martina.lilja@payex.com>
Date: Fri, 21 Feb 2025 10:48:13 +0100
Subject: [PATCH] ESY-6582 Update component Card with image properties

---
 _includes/card.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/_includes/card.html b/_includes/card.html
index f85db5410..57c8d2b31 100644
--- a/_includes/card.html
+++ b/_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 }} %}