Custom Bookmark Cards HTML with links inside

Using Ghost
1

Hi, like most people I like the book mark feature but wish I could edit the description. I therefore I used the snippet and HTML card to create my own.
The problem is that all links inside the new bookmark are inheriting an outline from .kg-bookmark-container

Untitled 61
Untitled 611486×686 138 KB

HTML:

<figure class="kg-card kg-bookmark-card">
    <a class="kg-bookmark-container" href="LINK_URL">
        <div class="kg-bookmark-content">
            <div class="kg-bookmark-title">TITLE</div>
            <div class="kg-bookmark-description">WRITE-UP THIS ARTICLE CONTINUE ON FROM <a href="www.example.com"> THAT </a> article
</div>
            <div class="kg-bookmark-metadata">
                <img class="kg-bookmark-icon" src="FEATURE_IMAGE_URL">
                <span class="kg-bookmark-author">AUTHOR_NAME</span>
                <span class="kg-bookmark-publisher">PUBLISHER_NAME</span>
            </div>
        </div>
        <div class="kg-bookmark-thumbnail">
            <img src="THUMBNAIL_IMAGE_URL">
        </div>
    </a>
</figure>

CSS:

 .kg-bookmark-card a.kg-bookmark-container,
            .kg-bookmark-card a.kg-bookmark-container:hover {
                display: flex;
                text-decoration: none;
                border-radius: 3px;
                border: 1px solid rgb(124 139 154 / 25%);
                overflow: hidden;
                color: inherit;
            }

So my questions

  • If I use code injection to add a better class - will it appear in the HTML emails? Usually it only works for inline-CSS?

  • Has anyone has this problem before? The inline CSS I tried is not working

2

This will be hard to debug without a live example. Do you have a page to share with this code active?

(Only inline CSS will be available to appear in emails. You’ll also want to test because results may vary depending on your email client.)