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