ESY-6582 Added property for open card in new tab

_includes/card.html

@@ -7,6 +7,7 @@
 text: Text content of the card
 cta_text: Text for the call to action.
 use_wide: Used when dx-card-horizontal is needed
+open_in_new_tab: Used to open the link in a new tab
 to(required): Url to the page to be directed to on click
 type: sdk | module - Empty type result in default card styling
 {%- endcomment -%}
@@ -18,6 +19,7 @@
 {% assign text = include.text %}
 {% assign cta_text = include.cta_text %}
 {% assign use_wide = include.use_wide | default: false %}
+{% assign open_in_new_tab = include.open_in_new_tab | default: false %}
 {% assign to = include.to %}
 
 {% if include.type %}
@@ -35,10 +37,14 @@
 {% if image_src %}
 {% assign icon_content = undefined %}
 {% endif %}
+{% assign target = '_self' %}
+{% if open_in_new_tab %}
+{% assign target = '_blank' %}
+{% endif %}
 
 {% capture card_attributes %}href="{{ to }}"{% endcapture %}
 
-<a {{ card_attributes }} class="{{ card_class }}">
+<a {{ card_attributes }} class="{{ card_class }}" target="{{target}}" >
     {% if image_src %}
     <img src="{{image_src}}" alt="{{image_alt_text}}" class="{{image_ratio}}" />
     {% endif %}

index.md

@@ -84,8 +84,9 @@ Here we have also formatted the content as two paragraphs with padding.
     <div class="col">
         {% include card.html
         title='Card'
-        text='A standard card'
-        to="/#cards/"
+        open_in_new_tab=true
+        text='A standard card that opens in a new tab'
+        to="https://design.swedbankpay.com"
         %}
     </div>
     <div class="col">
@@ -97,25 +98,6 @@ Here we have also formatted the content as two paragraphs with padding.
         %}
     </div>
 </div>
-<div class="row mt-4">
-    <div class="col">
-        {% include card.html
-        title='Card with an icon'
-        icon_content="at-check-circle"
-        text='A standard card'
-        to="/#cards/"
-        %}
-    </div>
-    <div class="col">
-        {% include card.html
-        title='Card with flag icon and button text'
-        icon_content="flag-icon flag-icon-se"
-        cta_text='CTA text'
-        text='A standard card'
-        to='/#cards/'
-        %}
-    </div>
-</div>
 <div class="row mt-4">
     <div class="col">
         {% include card.html title='Card with image'