Widget:Card: Difference between revisions

Card

Revision as of 20:12, 5 February 2024

           <img src="" alt="Icon" style="width: ; display: ; height: auto;">

       <a href="" style="display: flex; align-items: center;">

           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
               <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
       </a>

This page was edited 99 days ago on 02/10/2024. What links here

@@ Line 1: / Line 1: @@
-<!-- Widget code for a single card with constant location for the arrow and its label, including top spacing -->
+<!-- Widget code for a single card with reserved space for the arrow and its label -->
-<div style="max-width: 361px; min-height: 183px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; position: relative;">
+<div style="max-width: 361px; min-height: 223px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; display: flex; flex-direction: column; position: relative;">
-    <!-- Row container for icon and headings -->
+    <!-- Content container with padding-bottom to prevent overlap -->
-    <div style="display: flex; align-items: center; gap: 10px;">
+    <div style="display: flex; flex-direction: column; gap: 10px; padding-bottom: 40px;"> <!-- Increased padding-bottom to reserve space for the link and arrow -->
-        <!-- Optional image icon -->
+        <!-- Row container for icon and headings -->
-        <img src="<!--{$imageIcon|default:''}-->" alt="Icon" style="width: <!--{$iconSize|default:'50px'}-->; display: <!--{$display|default:'none'}-->; height: auto;">
+        <div style="display: flex; align-items: center; gap: 10px;">
-        <!-- Column container for heading and subheading -->
+            <!-- Optional image icon -->
-        <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex;">
+            <img src="<!--{$imageIcon|default:''}-->" alt="Icon" style="width: <!--{$iconSize|default:'50px'}-->; display: <!--{$display|default:'none'}-->; height: auto;">
-            <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word;"><!--{$heading|default:'Training'}--></div>
+            <!-- Column container for heading and subheading -->
-            <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word;"><!--{$subheading|default:'Learn by doing'}--></div>
+            <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex;">
+                <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word;"><!--{$heading|default:'Training'}--></div>
+                <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word;"><!--{$subheading|default:'Learn by doing'}--></div>
+            </div>
          </div>
+        <!-- Description text below icon and heading -->
+        <div style="max-width: 100%; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word;"><!--{$text|default:'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'}--></div>
      </div>
-    <!-- Description text below icon and heading -->
+     <!-- Link and arrow at the bottom, positioned absolutely -->
-    <div style="max-width: 100%; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word;"><!--{$text|default:'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'}--></div>
-     <!-- Link and arrow at the bottom, now with absolute positioning -->
      <div style="position: absolute; bottom: 24px; left: 24px; display: flex; align-items: center; gap: 6px;">
          <a href="<!--{$link|default:'#'}-->" style="display: flex; align-items: center;">