Widget
Card
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<!-- Widget code for a single card with an image to the left and | <!-- Widget code for a single card with an image to the left, text to the right, and wrapping around the image --> | ||
<div style="width: 361px; min-height: 183px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; | <div style="width: 361px; min-height: 183px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; position: relative; display: flex;"> | ||
<!-- Image to the left of the card --> | <!-- Image to the left of the card, slightly below the heading --> | ||
<img src="<!--{$imageIcon|default:'default-icon.png'}-->" alt="Icon" style="width: 50px; height: auto; | <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 --> | ||
<!-- Text content of the card --> | <!-- Text content of the card, wrapped around the image --> | ||
<div style="display: flex; flex-direction: column; justify-content: | <div style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; flex-grow: 1; padding-left: 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 style="color: black; font-size: 14px; font-weight: 300; word-wrap: break-word;"><!--{$text|default:'Default Text'}--></div> | <div style="color: black; font-size: 14px; font-weight: 300; word-wrap: break-word;"><!--{$text|default:'Default Text'}--></div> | ||
</div> | </div> | ||
</div> | |||
<!-- Separate div for the link with arrow icon, positioned at the bottom --> | |||
<div style="position: absolute; bottom: 24px; left: 24px;"> | |||
<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:'Default Link Text'}--></div> | |||
<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> | |||
</div> | </div> | ||
Revision as of 19:55, 10 November 2023
<img src="" alt="Icon" style="width: 50px; height: auto; margin-top: 24px; margin-right: 10px;"/>
<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 7 months ago on 02/10/2024. What links here
Retrieved from "https://learn.mdriven.net/index.php?title=Widget:Card&oldid=13276"