Widget:BestPractices: Difference between revisions

BestPractices

Revision as of 23:28, 17 December 2023

       <img src="" alt="Logo" style="max-width: 100%; max-height: 100%;">

       <a href="" style="color: #1A50AD; font-size: 20px; font-weight: 700; text-decoration: none;">
       </a>

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

@@ Line 1: / Line 1: @@
-<style>
+<div style="display: flex; align-items: center; padding: 10px; background: #E3E8EE; border-radius: 5px; margin-bottom: 10px; width: 350.75px; height: 120px;">
-        /* Responsive Styles for Mobile Devices */
+    <!-- Image logo on the left -->
-        @media (max-width: 767px) {
+    <div style="flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 50px;">
-            .card {
+        <img src="<!--{$imageUrl|default:'https://newwiki.mdriven.net/images/MDrivenBestPractices.svg'}-->" alt="Logo" style="max-width: 100%; max-height: 100%;">
-                flex-direction: column;
+    </div>
-                width: auto; /* Adjust width for smaller screens */
-                height: auto; /* Adjust height for smaller screens */
-                align-items: center; /* Center-align items for vertical stacking */
-            }
-            .card-logo {
-                width: 100%; /* Full width for the logo */
-                justify-content: center; /* Center logo horizontally */
-            }
-            .card-content {
-                padding-left: 0; /* Remove left padding on smaller screens */
-                padding-top: 10px; /* Add top padding for spacing */
-                align-items: center; /* Center-align text content */
-            }
-        }
-    </style>
-    <div class="card" style="display: flex; align-items: center; padding: 10px; background: #E3E8EE; border-radius: 5px; margin-bottom: 10px; width: 350.75px; height: 120px;">
-        <!-- Image logo on the left -->
-        <div class="card-logo" style="flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 50px;">
-            <img src="<!--{$imageUrl|default:'https://newwiki.mdriven.net/images/MDrivenBestPractices.svg'}-->" alt="Logo" style="max-width: 100%; max-height: 100%;">
-        </div>
-        <!-- Text content with heading and description on the right -->
+    <!-- Text content with heading and description on the right -->
-        <div class="card-content" style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 10px;">
+    <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 10px;">
-            <a href="<!--{$headingLink|default:'#'}-->" style="color: #1A50AD; font-size: 20px; font-weight: 700; text-decoration: none;">
+        <a href="<!--{$headingLink|default:'#'}-->" style="color: #1A50AD; font-size: 20px; font-weight: 700; text-decoration: none;">
-                <!--{$heading|default:'Heading'}-->
+            <!--{$heading|default:'Heading'}-->
-            </a>
+        </a>
-            <div style="color: #44546F; font-size: 14px; margin-top: 5px;">
+        <div style="color: #44546F; font-size: 14px; margin-top: 5px;">
-                <!--{$description|default:'Description'}-->
+            <!--{$description|default:'Description'}-->
-            </div>
          </div>
      </div>
+</div>