Theme Logic Cards

Feature any number of cards!

Make them work for you by using:

• Videos instead of images
• Multiple paragraphs
• Links in the text body
• Numbered and bulleted lists
• Bold and Italics
• Alt and title attributes to make them accessible

How it's done

1. Add this CSS Wrapper Class Name to a single-column row: theme-logic-featured-cards
2. Add the CSS below to your CSS Override.
3. Create your cards (html template below) in this row. One HTML Widget per card.

HTML for a card

Update with your own image and text.

<h6><img src="https://picsum.photos/800/450" class="img-responsive" alt="" ></h6>
<h3>Card Title Card Title Card Title Card Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget odio ac ipsum consectetur dapibus. Mauris nisl felis, dignissim eget metus id, eleifend interdum turpis. Suspendisse eros neque, sollicitudin placerat nisi id, dapibus lacinia mi. </p>
<p><a href="#" class="btn btn-primary">Take Action <i class="fa-solid fa-chevron-right"></i></a></p>

CSS

/* Grid setup */
.theme-logic-featured-cards > .col-md-12:first-child {
    padding: 0 25px;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}



/* How the individual cards look */
.theme-logic-featured-cards > .col-md-12:first-child > .ContentItemHtml {
    border: 1px solid #d9d9d9;
    padding: 0 15px 55px 15px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 0px 2px 1px rgba(140, 140, 140, .25);
    position: relative;
}
.theme-logic-featured-cards > .col-md-12:first-child > .ContentItemHtml p:last-child {
    position: absolute;
    bottom: 5px;
    left: 15px;
}



/* Your card images should be in a heading 6 and it will span full width of the card */
.theme-logic-featured-cards > .col-md-12:first-child > .ContentItemHtml h6 {
    margin: 0 -15px;
}



/* videos should be uploaded and inserted in the HTML editor */
.theme-logic-featured-cards > .col-md-12:first-child > .ContentItemHtml video{
    width: 100%;
    height: auto;
}