How to add css class to specific text.md file - module

Question

I’m using Grav modular pages to build a site but can’t find how to target a specific module to add a css class.
I have found this https://learn.getgrav.org/16/content/media but can’t see if there’s a way to do this.
What I’m trying to achieve is have a different background for each modular div in the page.

Answer 1

In the template : shared class for all modules
As a module implies, for its displaying, to browse the paren'ts page collection in the Twig template of that parent, you can add any HTML and CSS there.
For instance, here is one way of looping through the collection :
{% for module in page.collection %}
<section class="module">
{{ module.content }}
</section>
{% endfor %}
In the template : specific class
You can customize the CSS class by playing with a Twig variable. The most secure way is to use the slug of the page, wich has already escaped characters :
{% for module in page.collection %}
<section class="module_{{module.slug}}">
{{ module.content }}
</section>
{% endfor %}
In the markdown
You can use the already existent options to define CSS :
classes: module1
and then use it in the Twig, by using the header() function :
{% for module in page.collection %}
<section class="module_{{module.header.classes}}">
{{ module.content }}
</section>
{% endfor %}
Target a specific module
Now, for targetting a specific module in Twig, you have to import a page.
Here's the generic way of accessing an other page or sub-page content :
{% set imported_page = page.find("/route/to/the/page") %}
You can then use the header() and content() functions to access that imported page's frontmatter and content :
<section class="module_{{imported_page.header.classes}}">
{{ imported_page.content }}
</section>