Raptus Design Theme

Example

Zusätzliche Beschreibung zum Titel, welcher bereits oben abgebildet ist.


Möchtest du die Merkliste "Einkaufsliste vom 13.07.2019" wirklich löschen?

Markup
<div class="flyout">
    <div class="flyout__wrapper">
        <div class="flyout__title bar bar--return">
            <a href="javascript://" class="bar__title">
                Heading 3
            </a>
        </div>
        <p class="flyout__description">
            Zusätzliche Beschreibung zum Titel, welcher bereits oben abgebildet ist.
        </p>
        <div class="flyout__body">
            <a href="javascript://" class="post-card">
                <span class="post-card__title card-title">
                    Merkliste XYZ
                </span>
                <span class="post-card__description post-card__description--discreet icon icon-select-box"></span>
            </a>
        </div>
    </div>
</div>
<br>
<div class="flyout flyout--confirmation">
    <div class="flyout__wrapper">
        <div class="flyout__title bar bar--return">
            <a href="javascript://" class="bar__title">
                Merkliste wirklich löschen?
            </a>
        </div>
        <p class="flyout__description">
            Möchtest du die Merkliste "Einkaufsliste vom 13.07.2019" wirklich löschen?
        </p>
        <div class="flyout__body">
            <ul class="message-actions">
                <li>
                    <a href="javascript://" class="btn">Abbrechen</a>
                </li>
                <li>
                    <a href="javascript://" class="btn btn--shout btn--danger">Bestätigen</a>
                </li>
            </ul>
        </div>
    </div>
</div>
Source: assets/styles/03-molecules/02-status-messages/_flyout.scss, line 1