## Modal

Full-featured modal dialogs and overlay components.

### Basic Modal Structure

### Modal Title

This is the modal body content. You can add any content here including forms, images, or other components.

HTML

    <div
                class="modal-preview"
                style="
                    position: relative;
                    min-height: 400px;
                    background: var(--color_fill_secondary);
                    border-radius: 12px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                "
            >
                <!-- Modal Backdrop -->
                <div
                    class="modal--backdrop"
                    style="
                        position: absolute;
                        inset: 0;
                        background: rgba(0, 0, 0, 0.5);
                        border-radius: 12px;
                    "
                ></div>
                <!-- Modal Content -->
                <div
                    class="modal"
                    style="
                        position: relative;
                        width: 90%;
                        max-width: 480px;
                        background: white;
                        border-radius: 12px;
                        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                    "
                >
                    <div
                        class="modal--header"
                        style="
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 20px 24px;
                            border-bottom: 1px solid var(--color_line_secondary);
                        "
                    >
                        <h3 style="margin: 0; font-size: 18px">Modal Title</h3>
                        <button
                            class="modal--close"
                            style="
                                width: 32px;
                                height: 32px;
                                border: none;
                                background: var(--color_fill_secondary);
                                border-radius: 6px;
                                cursor: pointer;
                                font-size: 16px;
                            "
                        >
                            ✕
                        </button>
                    </div>
                    <div class="modal--body" style="padding: 24px">
                        <p style="margin: 0; line-height: 1.6">
                            This is the modal body content. You can add any content
                            here including forms, images, or other components.
                        </p>
                    </div>
                    <div
                        class="modal--footer"
                        style="
                            display: flex;
                            justify-content: flex-end;
                            gap: 12px;
                            padding: 16px 24px;
                            border-top: 1px solid var(--color_line_secondary);
                            background: var(--color_fill_secondary);
                            border-radius: 0 0 12px 12px;
                        "
                    >
                        <button
                            style="
                                padding: 10px 20px;
                                border: 1px solid var(--color_line_secondary);
                                background: white;
                                border-radius: 6px;
                                cursor: pointer;
                            "
                        >
                            Cancel
                        </button>
                        <button
                            style="
                                padding: 10px 20px;
                                border: none;
                                background: var(--color_fill_primary);
                                color: white;
                                border-radius: 6px;
                                cursor: pointer;
                            "
                        >
                            Confirm
                        </button>
                    </div>
                </div>
            </div>

### Modal Sizes

✓

#### Success!

Your changes have been saved.

### Large Modal

This is a larger modal suitable for complex content like forms, tables, or detailed information.

Column 1 content
Column 2 content
HTML

    <div style="display: flex; flex-direction: column; gap: 20px">
                <!-- Small Modal -->
                <div
                    class="modal modal--small"
                    style="
                        max-width: 320px;
                        background: white;
                        border-radius: 12px;
                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
                    "
                >
                    <div style="padding: 20px; text-align: center">
                        <div style="font-size: 48px; margin-bottom: 12px">✓</div>
                        <h4 style="margin: 0 0 8px">Success!</h4>
                        <p style="margin: 0 0 16px; font-size: 14px; opacity: 0.7">
                            Your changes have been saved.
                        </p>
                        <button
                            style="
                                padding: 10px 24px;
                                border: none;
                                background: var(--color_state_success);
                                color: white;
                                border-radius: 6px;
                                cursor: pointer;
                            "
                        >
                            OK
                        </button>
                    </div>
                </div>
                <!-- Large Modal -->
                <div
                    class="modal modal--large"
                    style="
                        max-width: 700px;
                        background: white;
                        border-radius: 12px;
                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
                    "
                >
                    <div
                        class="modal--header"
                        style="
                            padding: 20px 24px;
                            border-bottom: 1px solid var(--color_line_secondary);
                        "
                    >
                        <h3 style="margin: 0">Large Modal</h3>
                    </div>
                    <div class="modal--body" style="padding: 24px">
                        <p>
                            This is a larger modal suitable for complex content
                            like forms, tables, or detailed information.
                        </p>
                        <div
                            style="
                                display: grid;
                                grid-template-columns: repeat(2, 1fr);
                                gap: 16px;
                                margin-top: 16px;
                            "
                        >
                            <div
                                style="
                                    padding: 16px;
                                    background: var(--color_fill_secondary);
                                    border-radius: 8px;
                                "
                            >
                                Column 1 content
                            </div>
                            <div
                                style="
                                    padding: 16px;
                                    background: var(--color_fill_secondary);
                                    border-radius: 8px;
                                "
                            >
                                Column 2 content
                            </div>
                        </div>
                    </div>
                </div>
            </div>

### Fullscreen Modal

This modal takes up the full viewport. Perfect for immersive experiences, image galleries, or complex workflows.

HTML

    <div
                class="modal-preview"
                style="
                    position: relative;
                    min-height: 350px;
                    background: #1a1a2e;
                    border-radius: 12px;
                    overflow: hidden;
                "
            >
                <div
                    class="modal modal--fullscreen"
                    style="
                        position: absolute;
                        inset: 0;
                        background: white;
                        display: flex;
                        flex-direction: column;
                    "
                >
                    <div
                        class="modal--header"
                        style="
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 16px 24px;
                            border-bottom: 1px solid var(--color_line_secondary);
                        "
                    >
                        <h3 style="margin: 0; font-size: 16px">
                            Fullscreen Modal
                        </h3>
                        <button
                            style="
                                padding: 8px 16px;
                                border: none;
                                background: var(--color_fill_secondary);
                                border-radius: 6px;
                                cursor: pointer;
                            "
                        >
                            Close ✕
                        </button>
                    </div>
                    <div
                        class="modal--body"
                        style="flex: 1; padding: 24px; overflow-y: auto"
                    >
                        <p>
                            This modal takes up the full viewport. Perfect for
                            immersive experiences, image galleries, or complex
                            workflows.
                        </p>
                        <div
                            style="
                                display: grid;
                                grid-template-columns: repeat(3, 1fr);
                                gap: 12px;
                                margin-top: 16px;
                            "
                        >
                            <div
                                style="
                                    aspect-ratio: 1;
                                    background: linear-gradient(
                                        135deg,
                                        #667eea,
                                        #764ba2
                                    );
                                    border-radius: 8px;
                                "
                            ></div>
                            <div
                                style="
                                    aspect-ratio: 1;
                                    background: linear-gradient(
                                        135deg,
                                        #f093fb,
                                        #f5576c
                                    );
                                    border-radius: 8px;
                                "
                            ></div>
                            <div
                                style="
                                    aspect-ratio: 1;
                                    background: linear-gradient(
                                        135deg,
                                        #4facfe,
                                        #00f2fe
                                    );
                                    border-radius: 8px;
                                "
                            ></div>
                        </div>
                    </div>
                </div>
            </div>

### Form Modal

### Create Account

Fill in your details to get started

Full Name
Email
Password
HTML

    <div
                class="modal"
                style="
                    max-width: 450px;
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
                "
            >
                <div class="modal--header" style="padding: 24px 24px 0">
                    <h3 style="margin: 0 0 8px">Create Account</h3>
                    <p style="margin: 0; font-size: 14px; opacity: 0.7">
                        Fill in your details to get started
                    </p>
                </div>
                <form class="modal--body" style="padding: 24px">
                    <div style="margin-bottom: 16px">
                        <label
                            style="
                                display: block;
                                margin-bottom: 6px;
                                font-size: 14px;
                                font-weight: 500;
                            "
                        >
                            Full Name
                        </label>
                        <input
                            type="text"
                            placeholder="John Doe"
                            style="
                                width: 100%;
                                padding: 12px;
                                border: 1px solid var(--color_line_secondary);
                                border-radius: 8px;
                                font-size: 14px;
                                box-sizing: border-box;
                            "
                        />
                    </div>
                    <div style="margin-bottom: 16px">
                        <label
                            style="
                                display: block;
                                margin-bottom: 6px;
                                font-size: 14px;
                                font-weight: 500;
                            "
                        >
                            Email
                        </label>
                        <input
                            type="email"
                            placeholder="john@example.com"
                            style="
                                width: 100%;
                                padding: 12px;
                                border: 1px solid var(--color_line_secondary);
                                border-radius: 8px;
                                font-size: 14px;
                                box-sizing: border-box;
                            "
                        />
                    </div>
                    <div style="margin-bottom: 20px">
                        <label
                            style="
                                display: block;
                                margin-bottom: 6px;
                                font-size: 14px;
                                font-weight: 500;
                            "
                        >
                            Password
                        </label>
                        <input
                            type="password"
                            placeholder="••••••••"
                            style="
                                width: 100%;
                                padding: 12px;
                                border: 1px solid var(--color_line_secondary);
                                border-radius: 8px;
                                font-size: 14px;
                                box-sizing: border-box;
                            "
                        />
                    </div>
                    <button
                        type="submit"
                        style="
                            width: 100%;
                            padding: 14px;
                            border: none;
                            background: var(--color_fill_primary);
                            color: white;
                            border-radius: 8px;
                            cursor: pointer;
                            font-size: 15px;
                            font-weight: 500;
                        "
                    >
                        Create Account
                    </button>
                </form>
                <div
                    class="modal--footer"
                    style="
                        padding: 16px 24px;
                        text-align: center;
                        border-top: 1px solid var(--color_line_secondary);
                    "
                >
                    <p style="margin: 0; font-size: 14px; opacity: 0.7">
                        Already have an account?
                        <a href="#" style="color: var(--color_fill_primary)">
                            Sign in
                        </a>
                    </p>
                </div>
            </div>

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