Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Dispaying Clickable cards


Hi Team,

I want to display cards like this image. Is this possible somehow with Metronic themes, I checked most of the controls and dont see anything similar.

Looking forwards to your helpful response if such cards are possible.

https://ibb.co/KWh6HKm


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


To display clickable cards in a web application, you can use HTML and CSS to design cards with links that users can click on for more information. For example, a card could contain a picture, a title, and a description, and clicking it could lead to a new page or trigger a specific action. As for overwatch funny names, an example could be something like "Spraytan Jedi" or "WallHacksMcGee," which add humor and personality to game characters. These types of names often combine iconic elements of the game with playful twists that resonate with the community.



Hi,

Sorry for the late reply.

You can use the below example for linkable cards:


<a href="#%22%20class=%22card%20hover-elevate-up%20shadow-sm%20parent-hover" target="_blank" rel="noopener noreferrer">
<div class="card-body d-flex align-items">
<span class="svg-icon svg-icon-1">
...
</span>

<span class="ms-3 text-gray-700 parent-hover-primary fs-6 fw-bold">
Example link title
</span>
</div>
</a>


We will add this example into the documentation in the next update.

Regards


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(