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