Widget:Card: Difference between revisions

Card

Revision as of 22:36, 10 November 2023

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

       <a href="" style="display: inline-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 more than 11 months ago on 02/10/2024. What links here

@@ Line 1: / Line 1: @@
 <!-- Widget code for a single card -->
-<div style="width: 361px; min-height: 183px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; display: flex; flex-direction: column; align-items: <!--{$iconCenter|default:'flex-start'}-->; gap: 10px; position: relative;">
+<div style="width: 361px; min-height: 183px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; display: flex; flex-direction: column; align-items: <!--{$alignItems|default:'flex-start'}-->; gap: 10px; position: relative;">
-     <!-- Conditional div for the image icon if top-center variable is set -->
+     <!-- Optional top center icon -->
-     <!--{$iconCenterTop|if_set:'<div style="width: 100%; text-align: center;"><img src="<!--{$imageIcon|default:'default-icon.png'}-->" alt="Icon" style="width: <!--{$iconSize|default:'50px'}-->; height: auto; margin-bottom: 10px;"></div>'}-->
+     <!--{$topCenterIcon}-->
-    <!-- Regular positioning for image icon if variable not set -->
+    <div style="<!--{$topCenterIcon|default:'display: none;'}--> width: 100%; justify-content: center; position: absolute; top: 24px;">
-    <!--{$iconCenterTop|if_not_set:'<div style="position: absolute; top: 24px; left: 24px;"><img src="<!--{$imageIcon|default:'default-icon.png'}-->" alt="Icon" style="width: <!--{$iconSize|default:'50px'}-->; height: auto;"></div>'}-->
+        <img src="<!--{$imageIcon|default:'default-icon.png'}-->" alt="Icon" style="width: <!--{$iconSize|default:'50px'}-->; height: auto;">
-     <!-- Container for heading and subheading -->
+    </div>
-     <div style="flex-direction: column; justify-content: center; align-items: <!--{$iconCenter|default:'flex-start'}-->; gap: 4px; display: flex;">
+     <!-- Conditional margin top for when topCenterIcon is set, pushing content down -->
+     <div style="margin-top: <!--{$topCenterIconMargin|default:'0'}-->; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex;">
+        <!-- Heading and subheading -->
          <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>
-     <!-- Description text -->
+     <!-- Description text below icon and heading -->
      <div style="width: 313px; height: 50px; 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 -->
@@ Line 16: / Line 18: @@
          <a href="<!--{$link|default:'#'}-->" style="display: inline-flex; align-items: center;">
              <div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;"><!--{$linktext|default:'Take Training'}--></div>
+            <!-- SVG arrow inline with link text -->
              <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"/>