Caption
Descriptive text elements for images, figures, and tables.
Basic Caption
HTML
<figure style="margin: 0; max-width: 400px">
<img
src="https://via.placeholder.com/400x250"
alt="Sample image"
style="width: 100%; display: block; border-radius: 8px"
/>
<figcaption
class="ss-c-caption"
style="
margin-top: 12px;
font-size: 14px;
opacity: 0.7;
text-align: center;
"
>
Figure 1: A sample image with a descriptive caption below.
</figcaption>
</figure>Caption Positions
HTML
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 32px;
"
>
<!-- Caption Below -->
<figure style="margin: 0">
<img
src="https://via.placeholder.com/250x150"
alt="Sample"
style="width: 100%; display: block; border-radius: 8px"
/>
<figcaption
class="ss-c-caption"
style="margin-top: 8px; font-size: 13px; opacity: 0.7"
>
Caption below the image
</figcaption>
</figure>
<!-- Caption Above -->
<figure style="margin: 0">
<figcaption
class="ss-c-caption"
style="margin-bottom: 8px; font-size: 13px; opacity: 0.7"
>
Caption above the image
</figcaption>
<img
src="https://via.placeholder.com/250x150"
alt="Sample"
style="width: 100%; display: block; border-radius: 8px"
/>
</figure>
</div>Caption Overlay
HTML
<figure
style="
margin: 0;
max-width: 400px;
position: relative;
overflow: hidden;
border-radius: 12px;
"
>
<img
src="https://via.placeholder.com/400x280"
alt="Sample image"
style="width: 100%; display: block"
/>
<figcaption
class="ss-c-caption"
style="
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px 20px;
background: linear-gradient(
transparent,
rgba(0, 0, 0, 0.8)
);
color: white;
"
>
<strong>Overlay Caption</strong>
<br />
<span style="font-size: 13px; opacity: 0.9">
Text positioned over the image with gradient background.
</span>
</figcaption>
</figure>Table Caption
| Month | Sales | Growth |
|---|---|---|
| January | $12,500 | +5% |
| February | $15,200 | +21% |
| March | $14,800 | -3% |
HTML
<table
style="width: 100%; max-width: 500px; border-collapse: collapse"
>
<caption
class="ss-c-caption"
style="
caption-side: top;
text-align: left;
padding: 0 0 12px;
font-size: 14px;
font-weight: 600;
"
>
Table 1: Monthly Sales Data for Q1 2024
</caption>
<thead>
<tr style="background: var(--color_fill_secondary)">
<th
style="
padding: 12px;
text-align: left;
border-bottom: 2px solid
var(--color_line_secondary);
"
>
Month
</th>
<th
style="
padding: 12px;
text-align: right;
border-bottom: 2px solid
var(--color_line_secondary);
"
>
Sales
</th>
<th
style="
padding: 12px;
text-align: right;
border-bottom: 2px solid
var(--color_line_secondary);
"
>
Growth
</th>
</tr>
</thead>
<tbody>
<tr>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
January
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
$12,500
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--color_line_secondary);
color: var(--color_state_success);
"
>
+5%
</td>
</tr>
<tr>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
February
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
$15,200
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--color_line_secondary);
color: var(--color_state_success);
"
>
+21%
</td>
</tr>
<tr>
<td style="padding: 10px 12px">March</td>
<td style="padding: 10px 12px; text-align: right">
$14,800
</td>
<td
style="
padding: 10px 12px;
text-align: right;
color: var(--color_state_error);
"
>
-3%
</td>
</tr>
</tbody>
</table>Caption with Credits
A breathtaking view captured during golden hour at Yosemite National Park.
◉ Photo by Sarah Johnson | © 2024 All rights reserved
HTML
<figure style="margin: 0; max-width: 450px">
<img
src="https://via.placeholder.com/450x300"
alt="Landscape photo"
style="width: 100%; display: block; border-radius: 8px"
/>
<figcaption
class="ss-c-caption"
style="
margin-top: 12px;
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 6px;
font-size: 13px;
"
>
<strong>Sunset over the mountains</strong>
<p style="margin: 8px 0 0; opacity: 0.8; line-height: 1.5">
A breathtaking view captured during golden hour at Yosemite
National Park.
</p>
<p style="margin: 8px 0 0; font-size: 12px; opacity: 0.6">
◉ Photo by Sarah Johnson | © 2024 All rights reserved
</p>
</figcaption>
</figure>