Widget:Card: Difference between revisions

Card

Revision as of 20:00, 10 November 2023

   <img src="" alt="Icon" style="width: 40px; height: 40px; border-radius: 6px;">

 <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>

This page was edited more than 7 months ago on 02/10/2024. What links here

@@ Line 1: / Line 1: @@
-<!-- Widget code for a single card with an image to the left, text to the right, and wrapping around the image -->
+<!-- Widget code for a single card with variables for dynamic content -->
-<div style="width: 361px; min-height: 183px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; position: relative; display: flex;">
+<div style="width: 360px; height: auto; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; display: flex; flex-direction: row; align-items: flex-start; gap: 16px;">
-    <!-- Image to the left of the card, slightly below the heading -->
+  <!-- Image placeholder with a variable for the image source -->
-     <img src="<!--{$imageIcon|default:'default-icon.png'}-->" alt="Icon" style="width: 50px; height: auto; margin-top: 24px; margin-right: 10px;"/> <!-- Adjust size, margin-top as per icon alignment needs -->
+  <div style="width: 40px; height: 40px; flex-shrink: 0;">
+     <img src="<!--{$imageIcon|default:'path-to-default-image.png'}-->" alt="Icon" style="width: 40px; height: 40px; border-radius: 6px;">
-    <!-- Text content of the card, wrapped around the image -->
+  </div>
-    <div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; flex-grow: 1; padding-left: 10px;">
+  <!-- Text content container -->
-        <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word;"><!--{$heading|default:''}--></div>
+  <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center;">
-        <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word;"><!--{$subheading|default:'Default Subheading'}--></div>
+    <!-- Heading and subheading with variables -->
-        <div style="color: black; font-size: 14px; font-weight: 300; word-wrap: break-word;"><!--{$text|default:'Default Text'}--></div>
+    <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word;"><!--{$heading|default:'Training'}--></div>
-    </div>
+    <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word;"><!--{$subheading|default:'Learn by doing'}--></div>
+    <!-- Text description with a variable -->
+    <div style="color: black; font-size: 16px; font-weight: 300; word-wrap: break-word; margin-top: 4px;"><!--{$text|default:'Experience MDriven through hands-on training and tutorials designed to educate and inspire you to model your ideas.'}--></div>
+  </div>
 </div>
+<!-- Link with arrow icon and a variable for link text -->
-<!-- Separate div for the link with arrow icon, positioned at the bottom -->
+<div style="width: 360px; padding: 0 24px; display: flex; align-items: center; gap: 6px; margin-top: 10px;">
-<div style="position: absolute; bottom: 24px; left: 24px;">
+  <div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word;"><!--{$linktext|default:'Take training'}--></div>
-    <a href="<!--{$link|default:'#'}-->" style="display: inline-flex; align-items: center;">
+  <!-- SVG arrow icon -->
-        <div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;"><!--{$linktext|default:'Default Link Text'}--></div>
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none">
-        <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"/>
-            <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
-        </svg>
-    </a>
 </div>