Card Multi-Image
Card Text (top) Card List Card Text (bottom) Social media
{card.footer.text -> f:format.raw()}
Card Title (default)
{card.text.top -> f:format.crop(maxCharacters: '{card.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.text.top -> f:format.html()} {card.text.bottom -> f:format.crop(maxCharacters: '{card.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.text.bottom -> f:format.html()}
{card.text.bottom -> f:format.crop(maxCharacters: '{card.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.text.bottom -> f:format.html()}
{card.button.text -> f:format.raw()} {f:translate(key: 'LLL:EXT:t3sbootstrap/Resources/Private/Language/locallang.xlf:more')}
figure.multiImageCircle.image{overflow:inherit;display:block;} img.circularshadow {box-shadow: 3px 3px 20px rgb(0 0 0 / 50%);} .icon-block a { display: inline-block; font-size: 16px; color: #000; text-align: center; border: 1px solid #000; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin: 0 5px; z-index: 1; position: relative; } .icon-block a:hover { color: #fff; background-color: #000; } @media (min-width: 768px) { .icon-block a { font-size: 20px; width: 40px; height: 40px; line-height: 40px; } } figure#multiImage-{data.uid}::before { width:0; content:''; position:absolute; bottom:0; right:0; border-bottom: var(--t3sslope-{data.uid}) solid #fff; border-left: var(--t3swidth-{data.uid}) solid transparent; } :root { --t3sslope-{data.uid}: 0; --t3swidth-{data.uid}: 0; } // Profile Card Card/ProfileCard.html document.querySelectorAll('.multiImage').forEach( multiImage => { t3sbProfileCardImage(multiImage); }); window.addEventListener('resize', function(event) { document.querySelectorAll('.multiImage').forEach( multiImage => { t3sbProfileCardImage(multiImage); }); }, true);