Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Discussion options

Hey all 👋

I'm trying to update the grid card, complex example from the docs, but making the entire hovering card body into a clickable link. I'm trying to replicate the square grid cards at https://cuelang.org/docs/#how-to-use-this-documentation (not yet built using MkDocs!), where there's formatting inside each card and clicking on any part of the card follows its link.

No mixture of

  • <div class="grid cards" markdown>
  • <a href="#" class="card" style="display: block;">

... or similar seems to make this work. I can cause all the text inside a card to be a link, but that doesn't result in the card's whitespace being clickable.

Any ideas?

You must be logged in to vote

Replies: 2 comments · 2 replies

Comment options

This issue seems relevant: #6269

You must be logged in to vote
0 replies
Comment options

There are likely a number of ways to accomplish what you want. The problem with just wrapping these blocks with anchors is that nested anchors make a mess, and browsers likely won't render everything like you expect.

Python Markdown md_in_html handling can sometimes have issues as it expects Markdown HTML blocks to be at the root level of a document. Sometimes it works well enough, but under nested constructs like lists, admonitions in the style of !!! "admonition", etc. HTML markdown blocks may not always work as expected.

There is this extension (https://facelessuser.github.io/pymdown-extensions/extensions/blocks/plugins/html/) which works generally better in these situations.

div class="grid cards" markdown>

-   
    /// html | div[onclick="window.location.href='#;" style="cursor: pointer"]
    :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__

    ---

    Install [`mkdocs-material`](#) with [`pip`](#) and get up
    and running in minutes

    [:octicons-arrow-right-24: Getting started](#)
    ///

...

Granted, I still wouldn't use sublinks as they'll be overridden by the div link, but it will render well.

Again, there are likely other approaches as well.

I imagine there may be changes in the future foundational work that may make this easier or more intuitive, but I have no idea, as it isn't available yet: #8461

You must be logged in to vote
2 replies
@jpluscplusm
Comment options

Thank you very much for the info and pointers 😄

For context, I'm not intending to use "inner"/sub-links, but I can see how you inferred them from my initial post. I'm solely hoping to make the entire card clickable (including its whitespace), and to allow for (hopefully Markdown-based) rich styling within its body.

I'll take a look at the blocks plugin - TVVM!

@mdrxy
Comment options

I am similarly interested - if you find an elegant solution, please share!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
3 participants
Morty Proxy This is a proxified and sanitized view of the page, visit original site.