Widget:Card: Difference between revisions

Card

Revision as of 11:20, 5 November 2023

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

           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none" style="margin-left:auto;">
               <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 -->
+<!-- Responsive Widget code for a single card -->
-<div style="width: 361px; height: 183px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex">
+<div style="max-width: 361px; width: 100%; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; display: inline-flex; box-sizing: border-box;">
-     <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex; margin-top:10px;">
+     <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex; margin-top: 10px;">
-         <div style="color: #44546F; font-size: 14px;  font-weight: 400; word-wrap: break-word"><!--{$heading|default:''}--></div>
+         <div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word"><!--{$heading|default:''}--></div>
-         <div style="color: #112B3C; font-size: 20px;  font-weight: 700; word-wrap: break-word"><!--{$subheading|default:'Default Subheading'}--></div>
+         <div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word"><!--{$subheading|default:'Default Subheading'}--></div>
      </div>
-     <div style="width: 313px; height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word"><!--{$text|default:'Default Text'}--></div>
+     <div style="width: 100%; min-height: 50px; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word"><!--{$text|default:'Default Text'}--></div>
-     <div style="align-self: stretch; justify-content: flex-start; align-items: center; gap: 6px; display: inline-flex; margin-top:10px;">
+     <div style="width: 100%; justify-content: flex-start; align-items: center; gap: 6px; display: flex; margin-top: 10px;">
-         <a href="<!--{$link|default:'#'}-->" style="display: inline-flex; align-items: center;">
+         <a href="<!--{$link|default:'#'}-->" style="display: flex; align-items: center; width: 100%;">
              <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" style="margin-left:auto;">
                  <path d="M1 5H13M13 5L9.57143 1.57143M13 5L9.57143 8.42857" stroke="#1A50AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>