Widget
Card
No edit summary Tag: 2017 source edit |
|||
| (32 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<!-- Widget code for a single card --> | <!-- Widget code for a single card with reserved space for the arrow and its label --> | ||
<div style="width: 361px; height: | <div class="mainpage-card" style="max-width: 361px; min-height: 223px; padding: 24px; background: <!--{$cardColor|default:'#F3F6F9'}-->; border-radius: 6px; display: flex; flex-direction: column; position: relative;" onclick="window.location.href='<!--{$link|default:'#'}-->';"> | ||
<!-- Content container with padding-bottom to prevent overlap --> | |||
<div style="display: flex; flex-direction: column; gap: 10px; padding-bottom: 40px;"> <!-- Increased padding-bottom to reserve space for the link and arrow --> | |||
<!-- Row container for icon and headings --> | |||
<div style="display: flex; align-items: center; gap: 10px;"> | |||
<!-- Optional image icon --> | |||
<img src="<!--{$imageIcon|default:''}-->" alt="Icon" style="width: <!--{$iconSize|default:'50px'}-->; display: <!--{$display|default:'none'}-->; height: auto;"> | |||
<!-- Column container for heading and subheading --> | |||
<div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex;"> | |||
<div style="color: #44546F; font-size: 14px; font-weight: 400; word-wrap: break-word;"><!--{$heading|default:'Training'}--></div> | |||
<div style="color: #112B3C; font-size: 20px; font-weight: 700; word-wrap: break-word;"><!--{$subheading|default:'Learn by doing'}--></div> | |||
</div> | |||
</div> | |||
<!-- Description text below icon and heading --> | |||
<div style="max-width: 100%; color: black; font-size: 14px; font-weight: 300; word-wrap: break-word;"><!--{$text|default:'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'}--></div> | |||
</div> | </div> | ||
<!-- Link and arrow at the bottom, positioned absolutely --> | |||
<div style=" | <div style="position: absolute; bottom: 24px; left: 24px; display: flex; align-items: center; gap: 6px;"> | ||
<a href="<!--{$link|default:'#'}-->" style="display: | <a href="<!--{$link|default:'#'}-->" style="display: flex; align-items: center;"> | ||
<div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;"><!--{$linktext|default:' | <div style="color: #1A50AD; font-size: 14px; font-weight: 600; word-wrap: break-word; margin-right: 10px;"><!--{$linktext|default:'Take Training'}--></div> | ||
<!-- SVG arrow inline with link text --> | |||
<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"/> | ||
Latest revision as of 20:22, 10 February 2024
<img src="" alt="Icon" style="width: ; display: ; height: auto;">
<a href="" style="display: 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 113 days ago on 02/10/2024. What links here
Retrieved from "https://wiki.mdriven.net/index.php?title=Widget:Card&oldid=16873"