<!-- Simple image -->
<figure tabindex="0" role="group" aria-labelledby="figure-1">
<img src="../raw/image/1701-03-contemporary-dance-poster-0094.jpg" alt="" />
<figcaption id="figure-1">Figure 1. Caption here</figcaption>
</figure>
<!-- Table -->
<figure tabindex="0" role="group" aria-labelledby="figure-2">
<div class="table-container " tabindex="0" role="group">
<table>
<tbody>
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
</tr>
</tbody>
</table>
</div>
<figcaption id="figure-2">Figure 2. Caption here</figcaption>
</figure>
<figure tabindex="0" role="group"{{#with caption}} aria-labelledby="{{id}}"{{/with}}>
{{> (lookup . 'componentHandle') contextData }}
{{#with caption}}<figcaption id="{{id}}">{{{data}}}</figcaption>{{/with}}
</figure>
.caption
margin: $spacing3 0
text-align: left
color: $textgrey
font-size: $fontSize16
font-style: italic
figcaption
@extend .caption
/* Simple image */
{
"componentHandle": "@image",
"contextData": {
"url": "/components/raw/image/1701-03-contemporary-dance-poster-0094.jpg",
"alt": null
},
"border": null,
"caption": {
"id": "figure-1",
"data": "Figure 1. Caption here"
}
}
/* Table */
{
"componentHandle": "@table",
"contextData": {
"rows": [
{
"cells": [
{
"data": "Cell 1.1"
},
{
"data": "Cell 1.2"
},
{
"data": "Cell 1.3"
}
]
},
{
"cells": [
{
"data": "Cell 2.1"
},
{
"data": "Cell 2.2"
},
{
"data": "Cell 2.3"
}
]
},
{
"cells": [
{
"data": "Cell 3.1"
},
{
"data": "Cell 3.2"
},
{
"data": "Cell 3.3"
}
]
}
]
},
"caption": {
"id": "figure-2",
"data": "Figure 2. Caption here"
}
}