card

Example 1: Simple card

Elements with the class .tb-card will have some shadow and a max-width applied to them by default.
A collection of cards (even if there is only one) should always be wrapped in a div with class .tb-cards

Code

<div class="tb-cards">
    <div class="tb-card">
        <div class="tb-card-content">
            <p>[lorem 3]</p>
        </div>
    </div>
</div>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et nunc nec leo tristique eleifend. Nunc maximus sagittis luctus.

Example 2: Card with image, content and tag, opens a popup when you click it.

Related components:

image
popup

Code

<div class="tb-cards">
    <div class="tb-card tb-popup-trigger">
        <div class="tb-image-part">
            <?= tb_render_image(1010) ?>
        </div>
        <div class="tb-card-content">
            <h4>Card Title</h4>
            <p>You can click on this card to see more information in a popup.</p>
        </div>
        <div class="tag">
            Tag
        </div>
        <div class="tb-popup">
            <div class="tb-image-part">
                <?= tb_render_slider([1010, 1020, 1030]) ?>
            </div>
            <div class="tb-popup-content">
                [lorem]
            </div>
        </div>
    </div>
</div>