how to make table row clickable links with info badges

  • how to make table row clickable links with info badges, table row left side to contain a link and right side contain a small badge example link: here

    • This topic was modified 4 years, 11 months ago by zohaibkhan5.
    • This topic was modified 4 years, 11 months ago by zohaibkhan5.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi there,

    unless you use a plugin you would need to use some HTML ( in a HTML block ) and some CSS.

    Example HTML for each of your links:

    <a class="link-with-badge" href="url"><span class="link-label">The link label</span><span class="link-badge">Badge</span></a>

    CSS:

    .link-with-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.link-badge {
    font-size: 12px;
    padding: 4px 6px;
    background-color: #00F;
    color: #fff;
    border-radius: 4px;
}
    Thread Starter zohaibkhan5

    (@zohaibkhan5)

    Thanku @diggeddy it worked; i want to use an icon at left side of table row like this check this

    Just edit your HTML to include an image … for example

    <a class="link-with-badge" href="url">
<img class="link-icon" src="full_url_to_image" width=30 height=30 /><span class="link-label">The link label</span><span class="link-badge">Badge</span>
</a>
    Thread Starter zohaibkhan5

    (@zohaibkhan5)

    Thank u so much sir.

    You’re welcome

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘how to make table row clickable links with info badges’ is closed to new replies.