Thrive-style Content Boxes

Your own content while matching Thrive styling!

Can contain any content you want:

• Text
• Lists
• Links
• Images and video
• Buttons
• Anything

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet neque ac sapien molestie accumsan eu quis libero.

Curabitur vitae dui laoreet, rhoncus elit in, imperdiet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet neque ac sapien molestie accumsan eu quis libero.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Cras sit amet neque ac sapien

Lorem ipsum

How it's done

Add the CSS below to your CSS Override.

Drag an HTML Widget to into the member-home page, enter your content, and check the box to "Show Name of Title above content".

Add this CSS Wrapper Class Name your HTML Widget: theme-logic-thrive-box

Add your content, save, and publish your page.

CSS

.theme-logic-thrive-box {
    filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    margin-bottom: 25px;
}
.theme-logic-thrive-box .HtmlContent {
    background: white;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 0 0 7px 7px;
}
.theme-logic-thrive-box h2 {
    background: white;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0;
    border-radius: 7px 7px 0 0;
    padding: 15px 15px 10px;
    border-bottom: 1px solid #ddd;
}
.theme-logic-thrive-box .HtmlContent > p:last-child a {
    text-decoration: none;
    font-size: 13px;
}
.theme-logic-thrive-box .HtmlContent > p:last-child a > i {
    margin-left: 10px;
}
.theme-logic-thrive-box .HtmlContent > p:last-child a:hover {
    text-decoration: underline;
}