Caption
Descriptive text elements for images, figures, and tables.
Basic Caption
HTML
<figure style="margin: 0; max-width: 400px">
<img
src="/img/placeholder/400x250.svg"
alt="Sample image"
style="width: 100%; display: block; border-radius: var(--ss-radius-lg)"
/>
<figcaption
class="ss-c-caption"
style="
margin-top: 12px;
font-size: 14px;
color: var(--ss-color-text-muted);
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="/img/placeholder/250x150.svg"
alt="Sample"
style="width: 100%; display: block; border-radius: var(--ss-radius-lg)"
/>
<figcaption
class="ss-c-caption"
style="margin-top: 8px; font-size: 13px; color: var(--ss-color-text-muted)"
>
Caption below the image
</figcaption>
</figure>
<!-- Caption Above -->
<figure style="margin: 0">
<figcaption
class="ss-c-caption"
style="margin-bottom: 8px; font-size: 13px; color: var(--ss-color-text-muted)"
>
Caption above the image
</figcaption>
<img
src="/img/placeholder/250x150.svg"
alt="Sample"
style="width: 100%; display: block; border-radius: var(--ss-radius-lg)"
/>
</figure>
</div>Caption Overlay
HTML
<figure
style="
margin: 0;
max-width: 400px;
position: relative;
overflow: hidden;
border-radius: var(--ss-radius-lg);
"
>
<img
src="/img/placeholder/400x280.svg"
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(
rgba(0, 0, 0, 0.55),
rgba(0, 0, 0, 0.85)
);
color: white;
"
>
<strong>Overlay Caption</strong>
<br />
<span style="font-size: 13px">
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;
color: var(--ss-color-text-muted);
"
>
Table 1: Monthly Sales Data for Q1 2024
</caption>
<thead>
<tr style="background: var(--ss-color-surface-muted)">
<th
style="
padding: 12px;
text-align: left;
border-bottom: 2px solid
var(--ss-color-border);
"
>
Month
</th>
<th
style="
padding: 12px;
text-align: right;
border-bottom: 2px solid
var(--ss-color-border);
"
>
Sales
</th>
<th
style="
padding: 12px;
text-align: right;
border-bottom: 2px solid
var(--ss-color-border);
"
>
Growth
</th>
</tr>
</thead>
<tbody>
<tr>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--ss-color-border);
"
>
January
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--ss-color-border);
"
>
$12,500
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--ss-color-border);
color: var(--ss-color-success);
"
>
+5%
</td>
</tr>
<tr>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--ss-color-border);
"
>
February
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--ss-color-border);
"
>
$15,200
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--ss-color-border);
color: var(--ss-color-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(--ss-color-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="/img/placeholder/450x300.svg"
alt="Landscape photo"
style="width: 100%; display: block; border-radius: var(--ss-radius-lg)"
/>
<figcaption
class="ss-c-caption"
style="
margin-top: 12px;
padding: 12px;
background: var(--ss-color-surface-muted);
border-radius: var(--ss-radius-md);
font-size: 13px;
color: var(--ss-color-text);
"
>
<strong>Sunset over the mountains</strong>
<p style="margin: 8px 0 0; color: var(--ss-color-text-muted); 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; color: var(--ss-color-text-muted)">
◉ Photo by Sarah Johnson | © 2024 All rights reserved
</p>
</figcaption>
</figure>