Widget:BestPractices: Difference between revisions

BestPractices

Latest revision as of 07:40, 1 August 2024

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

This page was edited 50 days ago on 08/01/2024. What links here

@@ Line 1: / Line 1: @@
-<style>
+<div style="border-radius: 10px; background: rgba(226, 245, 250, 0.70); padding: 10px; display: flex; justify-content: center; align-items: center; height: 100px;" class="bestpractices-card">
-        /* Responsive Styles for Mobile Devices */
+    <a href="<!--{$headingLink|default:'#'}-->" style="color: #1A50AD; font-size: 20px; font-weight: 700; text-decoration: none;">
-        @media (max-width: 767px) {
+        <!--{$heading|default:'Heading'}-->
-            .card {
+    </a>
-                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 -->
-        <div class="card-content" 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;">
-                <!--{$heading|default:'Heading'}-->
-            </a>
-            <div style="color: #44546F; font-size: 14px; margin-top: 5px;">
-                <!--{$description|default:'Description'}-->
-            </div>
-        </div>
-    </div>