## Mark Characters

Highlighted and marked text for emphasis and search results.

### Basic Mark

The mark element is used to highlight text that is relevant to the current context, such as search results or important passages.

HTML

    <p>
                The
                <mark>mark element</mark>
                is used to highlight text that is relevant to the current context,
                such as search results or important passages.
            </p>

### Mark Variations

Default: highlighted text

Yellow: important note

Success: approved

Error: critical

Info: reference

HTML

    <div style="display: flex; flex-direction: column; gap: 16px">
                <p>
                    Default:
                    <mark>highlighted text</mark>
                </p>
                <p>
                    Yellow:
                    <mark
                        style="
                            background: #fff3cd;
                            padding: 2px 6px;
                            border-radius: 3px;
                        "
                    >
                        important note
                    </mark>
                </p>
                <p>
                    Success:
                    <mark
                        style="
                            background: #d4edda;
                            color: #155724;
                            padding: 2px 6px;
                            border-radius: 3px;
                        "
                    >
                        approved
                    </mark>
                </p>
                <p>
                    Error:
                    <mark
                        style="
                            background: #f8d7da;
                            color: #721c24;
                            padding: 2px 6px;
                            border-radius: 3px;
                        "
                    >
                        critical
                    </mark>
                </p>
                <p>
                    Info:
                    <mark
                        style="
                            background: #cce5ff;
                            color: #004085;
                            padding: 2px 6px;
                            border-radius: 3px;
                        "
                    >
                        reference
                    </mark>
                </p>
            </div>

### Search Result Highlighting

3 results for "typography"

#### Introduction to Typography

Learn the fundamentals of typography and how it affects...

#### Advanced Typography Techniques

Explore advanced typography methods for...

HTML

    <div
                class="search-results"
                style="
                    padding: 16px;
                    background: var(--color_fill_secondary);
                    border-radius: 8px;
                "
            >
                <p style="margin: 0 0 12px; font-size: 14px; opacity: 0.7">
                    3 results for "typography"
                </p>
                <div
                    style="
                        padding: 12px;
                        background: white;
                        border-radius: 6px;
                        margin-bottom: 8px;
                    "
                >
                    <h4 style="margin: 0 0 4px">
                        Introduction to
                        <mark
                            style="
                                background: #fff59d;
                                padding: 1px 4px;
                                border-radius: 2px;
                            "
                        >
                            Typography
                        </mark>
                    </h4>
                    <p style="margin: 0; font-size: 14px; opacity: 0.8">
                        Learn the fundamentals of
                        <mark
                            style="
                                background: #fff59d;
                                padding: 1px 4px;
                                border-radius: 2px;
                            "
                        >
                            typography
                        </mark>
                        and how it affects...
                    </p>
                </div>
                <div style="padding: 12px; background: white; border-radius: 6px">
                    <h4 style="margin: 0 0 4px">
                        Advanced
                        <mark
                            style="
                                background: #fff59d;
                                padding: 1px 4px;
                                border-radius: 2px;
                            "
                        >
                            Typography
                        </mark>
                        Techniques
                    </h4>
                    <p style="margin: 0; font-size: 14px; opacity: 0.8">
                        Explore advanced
                        <mark
                            style="
                                background: #fff59d;
                                padding: 1px 4px;
                                border-radius: 2px;
                            "
                        >
                            typography
                        </mark>
                        methods for...
                    </p>
                </div>
            </div>

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