Hi @simonp I’m not sure there is a specific resource for your question, here is an example of JSON for a similar module that has a card field with image and rich text:
[
{
"children": [
{
"default": {
"loading": "lazy",
"alt": "11",
"src": "https://45340635.fs1.hubspotusercontent-na1.net/hubfs/45340635/11.png",
"width": 1000,
"height": 1000,
"max_width": 1000,
"max_height": 1000
},
"display_width": null,
"id": "card.image",
"label": "Image",
"locked": false,
"name": "image",
"required": false,
"resizable": true,
"responsive": true,
"show_loading": true,
"type": "image"
},
{
"default": "<h3>This is a title</h3><p>description text here.</p>",
"display_width": null,
"enabled_features": [
"emoji",
"lists",
"font_size",
"standard_emphasis",
"block",
"font_family",
"alignment",
"advanced_emphasis"
],
"id": "card.text",
"label": "Content",
"locked": false,
"name": "text",
"required": false,
"type": "richtext"
}
],
"default": [
{
"image": {
"loading": "lazy",
"alt": "11",
"src": "https://45340635.fs1.hubspotusercontent-na1.net/hubfs/45340635/11.png",
"width": 1000,
"height": 1000,
"max_width": 1000,
"max_height": 1000
},
"text": "<h3>This is a title</h3><p>description text here.</p>"
},
{
"image": {
"loading": "lazy",
"alt": "11",
"src": "https://45340635.fs1.hubspotusercontent-na1.net/hubfs/45340635/11.png",
"width": 1000,
"height": 1000,
"max_width": 1000,
"max_height": 1000
},
"text": "<h3>This is a title</h3><p>description text here.</p>"
},
{
"image": {
"loading": "lazy",
"alt": "11",
"src": "https://45340635.fs1.hubspotusercontent-na1.net/hubfs/45340635/11.png",
"width": 1000,
"height": 1000,
"max_width": 1000,
"max_height": 1000
},
"text": "<h3>This is a title</h3><p>description text here.</p>"
}
],
"display_width": null,
"expanded": false,
"id": "card",
"label": "Card",
"locked": false,
"name": "card",
"occurrence": {
"default": 3,
"min": 1,
"sorting_label_field": "card.title"
},
"required": false,
"tab": "CONTENT",
"type": "group"
}
]
and the module.html:
{# Image #}
{% if module.styles.image.corner.radius >= 0 %}
.card__image {
border-radius: {{ module.styles.image.corner.radius ~ "px" }};
}
{% endif %}
{# Card #}
.card {
{% if module.styles.card.background.background_type == "color" and module.styles.card.background.color.color %}
background-color: rgba({{ module.styles.card.background.color.color|convert_rgb }}, {{ module.styles.card.background.color.opacity / 100 }});
{% elif module.styles.card.background.background_type == "gradient" %}
background: {{ module.styles.card.background.gradient.css }};
{% elif module.styles.card.background.background_type == "image" %}
{{ module.styles.card.background.image.css }}
{% endif %}
{{ module.styles.card.border.border.css }}
{% if module.styles.card.corner.radius >= 0 %}
border-radius: {{ module.styles.card.corner.radius ~ "px" }};
{% endif %}
{{ module.styles.card.spacing.spacing.css }}
}
{% end_scope_css %}
</style>
{% end_require_css %}
{# Cards #}
<div class="cards">
{# Loops through each card in the cards repeater #}
{% for card in module.card %}
<section class="cards__card card">
{% if card.image.src %}
{% set sizeAttrs = 'width="{{ card.image.width }}" height="{{ card.image.height }}"' %}
{% if card.image.size_type == "auto" %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif card.image.size_type == "auto_custom_max" %}
{% set sizeAttrs = 'width="{{ card.image.max_width }}" height="{{ card.image.max_height }}" style="max-width: 100%; max-height: auto;"' %}
{% endif %}
{% set loadingAttr = card.image.loading != "disabled" ? 'loading="{{ card.image.loading }}"' : "" %}
<img class="card__image" src="{{ card.image.src }}" alt="{{ card.image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
{% if card.text %}
<div class="card__text">
{{ card.text }}
</div>
{% endif %}
</section>
{% endfor %}
</div>
