HTML code blocks not displaying properly

[lhorwath]

Hello there, I'm trying to set up a grid for my home page but neither my code or the sample code provided in the documentation displays properly.

For reference this is the code on index.md:

# DAS Hub

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="grid cards" markdown="block">

- :fontawesome-brands-html5: __HTML__ for content and structure
- :fontawesome-brands-js: __JavaScript__ for interactivity
- :fontawesome-brands-css3: __CSS__ for text running out of boxes
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The page loads and the pipeline runs without any issue, but instead of rendering a grid it displays a list.

I've enabled the proper extension in my mkdocs.yml file:

markdown_extensions:
  - attr_list
  - md_in_html

I've also tried altering the tag in the <div class="grid cards" markdown="block"> to either <div class="grid cards" markdown> or <div class="grid cards" markdown="1">, but to no avail.

Does anyone here have a clue as to what I am doing wrong? I've added a screenshot of the page as it currently renders with the aforementioned code.

[squidfunk]

Thanks for reporting. Are you using the Insiders build? Card grids are currently only available to sponsors of the project:

[pieroliviermarquis]

I think you should make it clearer that it is only available for insiders. I just spent 2 hours trying to make grids work not knowing it wasn't supposed to work. Thanks for the great work.

[squidfunk]

How could we make it clearer? There's the pumping Insiders heart and the version tag which says that it's available as part of Insiders. Also, all conventions are explained here: https://squidfunk.github.io/mkdocs-material/philosophy/#conventions

[pieroliviermarquis]

Yes, but most people will skim through documentations and not read the entire thing before coding. A pumping heart is not a symbol commonly associated with something not available and so is the word experimental which usually refers to something being tested. If you wrote something such as "Only available to Insiders" on the line with the pumping heart, it would have been immediately obvious.

[squidfunk]

I went ahead and changed ❤️ Insiders to ❤️ Sponsors only in 6bc1886 – let's see if that's better 😊

[pieroliviermarquis]

Yes, that makes a lot of sense. Thanks.