## Caption

Descriptive text elements for images, figures, and tables.

### Basic Caption

Figure 1: A sample image with a descriptive caption below.
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="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

Caption below the image
Caption above the image
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="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="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

Overlay Caption
Text positioned over the image with gradient background.
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="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

Table 1: Monthly Sales Data for Q1 2024
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="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

Sunset over the mountains

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="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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!