# Warn-, Erfolgs- & Info-Blöcke

**URL:** https://meta.discourse.org/t/warning-success-info-blocks/234753
**Category:** Support
**Created:** [2. August 2022 um 02:03 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753 "2022-08-02T02:03:23Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![simonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simonk/32/247950_2.png) [@simonk](https://meta.discourse.org/u/simonk)
#### Post date: [2. August 2022 um 09:26 UTC](https://meta.discourse.org/t/warning-success-info-blocks/234753/2 "2022-08-02T09:26:32Z")

</div>

Sie können die [generische BBCode-Wrapper-Unterstützung](https://meta.discourse.org/t/generic-bbcode-wrapper-for-theme-components/123516) verwenden, etwas wie dies:

```plaintext
[wrap=success]
**Erfolg!** Ihre Nachricht wurde erfolgreich gesendet
[/wrap]

```

…was zu diesem HTML wird:

```html
<div class="d-wrap" data-wrap="success" dir="ltr">
  <p><strong>Erfolg!</strong> Ihre Nachricht wurde erfolgreich gesendet</p>
</div>

```

Sie können CSS hinzufügen, das auf `.d-wrap[data-wrap="success"]` abzielt, um es zu gestalten.

Ich benutze das:

```css
@mixin admonition($color, $bgcolor, $bordercolor, $iconurl) {
    padding: 8px;
    padding-left: 4em;
    padding-right: 2em;
    color: $color;
    border-left: 5px solid $bordercolor;
    background-color: $bgcolor;
    background-image: url($iconurl);
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: 1em 1.25em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 1em;
}

.d-wrap[data-wrap="info"] {
    @include admonition(#084298, #cfe2ff, #b6d4fe, "/images/emoji/google/information_source.png");
}

.d-wrap[data-wrap="warning"] {
    @include admonition(#664d03, #fff3cd, #ffecb5, "/images/emoji/google/warning.png");
}

.d-wrap[data-wrap="danger"] {
    @include admonition(#842029, #f8d7da, #f5c2c7, "/images/emoji/google/stop_sign.png");
}

```

…was es mir ermöglicht, Dinge wie diese zu erstellen:

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/7/f/f7f689fc9b0170559d4b0e34a57bb90abf0c8a9a.png)

---

_[View the full topic](https://meta.discourse.org/t/warning-success-info-blocks/234753)._