Callout

Callout-Komponenten werden verwendet, um wichtige Informationen oder Warnungen auf einer Seite anzuzeigen.
Es gibt vier Varianten: Info, Success, Warning und Danger. Jede Variante hat einen eigenen Stil und eine eigene Bedeutung.

Statusmeldungen

Info

Ein Callout der Variante "Info", der verwendet wird, um allgemeine Informationen oder Hinweise anzuzeigen.

Dies ist ein Callout der Variante "Info", der verwendet wird, um allgemeine Informationen oder Hinweise anzuzeigen.


<div class="m-callout -info">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#info"></use>
            </svg>
        </span>
        <span class="m-callout__title">
            Information
        </span>
    </div>
    <div class="m-callout__content">
        Dies ist ein Callout der Variante "Info", der verwendet wird, um allgemeine Informationen oder Hinweise anzuzeigen.
    </div>
</div>

Success

Ein Callout der Variante "Success", der verwendet wird, um positive Nachrichten oder Bestätigungen anzuzeigen.

Dies ist ein Callout der Variante "Success", der verwendet wird, um positive Nachrichten oder Bestätigungen anzuzeigen.


<div class="m-callout -success">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#circle-check"></use>
            </svg>
        </span>
        <span class="m-callout__title">
            Erfolg
        </span>
    </div>
    <div class="m-callout__content">
        Dies ist ein Callout der Variante "Success", der verwendet wird, um positive Nachrichten oder Bestätigungen anzuzeigen.
    </div>
</div>

Warning

Ein Callout der Variante "Warning", der verwendet wird, um Warnungen oder potenzielle Probleme anzuzeigen.

Dies ist ein Callout der Variante "Warning", der verwendet wird, um Warnungen oder potenzielle Probleme anzuzeigen.

      
<div class="m-callout -warning">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#triangle-alert"></use>
            </svg>
        </span>
        <span class="m-callout__title">
            Warnung
        </span>
    </div>
    <div class="m-callout__content">
        Dies ist ein Callout der Variante "Warning", der verwendet wird, um Warnungen oder potenzielle Probleme anzuzeigen.
    </div>
</div>

Danger

Ein Callout der Variante "Danger", der verwendet wird, um kritische Fehler oder ernsthafte Probleme anzuzeigen.

Dies ist ein Callout der Variante "Danger", der verwendet wird, um kritische Fehler oder ernsthafte Probleme anzuzeigen.

        
<div class="m-callout -danger">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#circle-x"></use>
            </svg>
        </span>
        <span class="m-callout__title">Fehler</span>
    </div>
    <div class="m-callout__content">
        Dies ist ein Callout der Variante "Danger", der verwendet wird, um kritische Fehler oder ernsthafte Probleme anzuzeigen.
    </div>
</div>

Erweiterte Beispiele

Tip

Ein Callout der Variante "Tip", der verwendet wird, um nützliche Tipps oder Empfehlungen anzuzeigen.

Dies ist ein Callout der Variante "Tip", der verwendet wird, um nützliche Tipps oder Empfehlungen anzuzeigen.


<div class="m-callout -tip">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#lightbulb"></use>
            </svg>
        </span>
        <span class="m-callout__title">Tipp</span>
    </div>
    <div class="m-callout__content">
        Dies ist ein Callout der Variante "Tip", der verwendet wird, um nützliche Tipps oder Empfehlungen anzuzeigen.
    </div>
</div>

Mit Link

Ein Callout der Variante "Info", das einen Link enthält, um weitere Informationen bereitzustellen.

Dies ist ein Callout der Variante "Info", das einen Link enthält, um weitere Informationen bereitzustellen.


<div class="m-callout -info">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#info"></use>
            </svg>
        </span>
        <span class="m-callout__title">Information</span>
    </div>
    <div class="m-callout__content">
        Dies ist ein Callout der Variante "Info", das einen <a href="#" class="a-link">Link</a> enthält, um weitere Informationen bereitzustellen.
    </div>
</div>

Mit Liste

Ein Callout der Variante "Warning", das eine Liste enthält, um mehrere Punkte oder Warnungen anzuzeigen.

Dies ist ein Callout der Variante "Warning", das eine Liste enthält, um mehrere Punkte oder Warnungen anzuzeigen.

Punkt 1: Beschreibung des ersten Problems.
Punkt 2: Beschreibung des zweiten Problems.
Punkt 3: Beschreibung des dritten Problems.


<div class="m-callout -warning">
    <div class="m-callout__header">
        <span class="m-callout__icon a-icon">
            <svg aria-hidden="true">
                <use href="/assets/icons/sprite.svg#triangle-alert"></use>
            </svg>
        </span>
        <span class="m-callout__title">Warnung</span>
    </div>
    <div class="m-callout__content">
        Dies ist ein Callout der Variante "Warning", das eine Liste enthält, um mehrere Punkte oder Warnungen anzuzeigen.
        <ul class="a-list">
            <li class="a-list__item">Punkt 1: Beschreibung des ersten Problems.</li>
            <li class="a-list__item">Punkt 2: Beschreibung des zweiten Problems.</li>
            <li class="a-list__item">Punkt 3: Beschreibung des dritten Problems.</li>
        </ul>
    </div>
</div>

Klassen

Klasse	Beschreibung
`.m-callout`	Basis-Klasse für Callouts.
`.m-callout__header`	Header-Element eines Callouts.
`.m-callout__icon`	Icon-Element eines Callouts.
`.m-callout__title`	Title-Element eines Callouts.
`.m-callout__content`	Inhalt-Element eines Callouts.
`.-info`	Modifikator für die Info-Variante eines Callouts.
`.-warning`	Modifikator für die Warning-Variante eines Callouts.
`.-success`	Modifikator für die Success-Variante eines Callouts.
`.-danger`	Modifikator für die Danger-Variante eines Callouts.
`.-tip`	Modifikator für die Tip-Variante eines Callouts.

Hinweise

Callouts sollten sparsam verwendet werden, um die Aufmerksamkeit der Benutzer nicht zu überfordern. Verwende sie nur für wichtige Informationen oder Warnungen, die Benutzer kennen müssen.

Best Practices

Verwende Callouts, um wichtige Informationen oder Warnungen hervorzuheben, die Benutzer kennen müssen. Sie können auch verwendet werden, um Tipps oder Empfehlungen zu geben, die Benutzern helfen können, eine Aufgabe erfolgreich abzuschließen.

Vermeide die Verwendung von Callouts für unwichtige Informationen oder als reines Design-Element. Verwende sie nicht als Ersatz für andere UI-Elemente wie Modale oder Benachrichtigungen.

Accessibility

Callouts sollten nicht ausschließlich über Farben unterschieden werden. Der Titel und das Icon sollten die Bedeutung zusätzlich vermitteln. Für wichtige Warnungen kann role="alert" verwendet werden.