## Cover

Full-screen and half-screen cover sections for hero areas and landing pages.

### Full Cover

# Welcome to Stylescape

A comprehensive visual identity framework

HTML

    <div
                class="cover cover--full"
                style="
                    height: 400px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                "
            >
                <div
                    class="cover__image"
                    style="
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(
                            135deg,
                            #667eea 0%,
                            #764ba2 100%
                        );
                    "
                ></div>
                <div
                    class="cover__content"
                    style="
                        position: relative;
                        text-align: center;
                        color: white;
                        z-index: 1;
                    "
                >
                    <h1
                        class="cover__title"
                        style="font-size: 2.5rem; margin-bottom: 16px"
                    >
                        Welcome to Stylescape
                    </h1>
                    <p
                        class="cover__subtitle"
                        style="
                            font-size: 1.25rem;
                            opacity: 0.9;
                            margin-bottom: 24px;
                        "
                    >
                        A comprehensive visual identity framework
                    </p>
                    <div
                        class="cover__actions"
                        style="display: flex; gap: 12px; justify-content: center"
                    >
                        <button class="button button--primary button--large">
                            Get Started
                        </button>
                        <button
                            class="button button--secondary button--large"
                            style="
                                background: rgba(255, 255, 255, 0.2);
                                border-color: white;
                                color: white;
                            "
                        >
                            Learn More
                        </button>
                    </div>
                </div>
            </div>

### Semi Cover (50vh)

## Half-Height Cover

Perfect for secondary sections

HTML

    <div
                class="cover cover--semi"
                style="
                    height: 300px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                "
            >
                <div
                    class="cover__image"
                    style="
                        position: absolute;
                        inset: 0;
                        background: linear-gradient(
                            45deg,
                            #f093fb 0%,
                            #f5576c 100%
                        );
                    "
                ></div>
                <div
                    class="cover__content"
                    style="position: relative; text-align: center; color: white"
                >
                    <h2
                        class="cover__title"
                        style="font-size: 2rem; margin-bottom: 12px"
                    >
                        Half-Height Cover
                    </h2>
                    <p class="cover__subtitle">Perfect for secondary sections</p>
                </div>
            </div>

### Cover with Image & Overlay

# Stunning Imagery

With overlay for text readability

HTML

    <div
                class="cover"
                style="
                    height: 350px;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                "
            >
                <div
                    class="cover__image"
                    style="
                        position: absolute;
                        inset: 0;
                        background: url(&quot;https://via.placeholder.com/1920x1080&quot;)
                            center/cover;
                    "
                ></div>
                <div
                    class="cover__overlay"
                    style="
                        position: absolute;
                        inset: 0;
                        background: rgba(0, 0, 0, 0.5);
                    "
                ></div>
                <div
                    class="cover__content"
                    style="position: relative; text-align: center; color: white"
                >
                    <h1
                        class="cover__title"
                        style="font-size: 2rem; margin-bottom: 12px"
                    >
                        Stunning Imagery
                    </h1>
                    <p class="cover__subtitle">
                        With overlay for text readability
                    </p>
                </div>
            </div>

### Cover Centered with CTA

New Feature

## Centered Layout

Ideal for announcements, CTAs, and feature highlights with centered content alignment.

HTML

    <div
                class="cover cover--centered"
                style="
                    height: 350px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: var(--color_fill_secondary);
                "
            >
                <div
                    class="cover__content"
                    style="text-align: center; max-width: 600px; padding: 24px"
                >
                    <span
                        class="badge badge--primary"
                        style="margin-bottom: 16px; display: inline-block"
                    >
                        New Feature
                    </span>
                    <h2
                        class="cover__title"
                        style="font-size: 2rem; margin-bottom: 12px"
                    >
                        Centered Layout
                    </h2>
                    <p
                        class="cover__subtitle"
                        style="margin-bottom: 24px; opacity: 0.8"
                    >
                        Ideal for announcements, CTAs, and feature highlights with
                        centered content alignment.
                    </p>
                    <button class="button button--primary">Explore Now</button>
                </div>
            </div>

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