# CSS for Admonition Extension

**URL:** <https://talk.commonmark.org/t/css-for-admonition-extension/3545>\
**Category:** Extensions\
**Created:** [July 10, 2020, 11:53am UTC](https://talk.commonmark.org/t/css-for-admonition-extension/3545 "2020-07-10T11:53:49Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![lmmx](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/lmmx/32/2950_2.png) [@lmmx](https://talk.commonmark.org/u/lmmx)\
**Post date:** [May 10, 2024, 12:11am UTC](https://talk.commonmark.org/t/css-for-admonition-extension/3545/6 "2024-05-10T00:11:40Z")

</div>

I developed this a bit more to make it look even more like mkdocs:

 ![Screenshot from 2024-05-10 01-09-58](https://cdn.commonmark.org/uploads/default/original/2X/c/c0724bc59fca08517a294164df6ceb8c4692176d.png)

```auto
.admonition{
        padding: 15px 20px;
        padding-bottom: 0 !important;
        margin-bottom: 20px;
        border: 1px solid #448aff;
        border-radius: 4px;
        box-shadow: 0 0.2rem 0.5rem #0000000d,0 0 0.05rem #0000001a;
        color: #222222;
}
.admonition::before {
        position: absolute;
        margin-left: 0;
        margin-top: -5px;
}
.admonition-title {
        font-weight: bold;
        padding: 10px 20px;
        padding-left: 6rem; 
        margin: -15px -20px 0 -20px;
        border-radius: 4px 4px 0 0;
}
.admonition-title + * {
        margin-top: 15px;
}
.admonition-title a {
        color: green;
}

/* Danger/warning (orange) */

.admonition.danger::before, .admonition.warning::before {
        content: "⚠️";
        color: darkorange;
}
.admonition.danger, .admonition.warning{
        border-color: #ff9800;
}
.admonition.danger .admonition-title, .admonition.warning .admonition-title {
        background-color: #ffe0b2;
}

/* Important (green) */

.admonition.important::before {
        content: "❗";
        color: green;
        filter: sepia(1) saturate(5) hue-rotate(90deg);
}
.admonition.important{
        border-color: #4caf50;
}
.admonition.important .admonition-title {
        background-color: #c8e6c9;
}

/* Note (blue) */

.admonition.note::before {
        content: "✏️";
        color: royalblue;
        filter: sepia(1) saturate(3) hue-rotate(180deg);
}
.admonition.note {
        border-color: #00b8d4;
}
.admonition.note .admonition-title {
        background-color: #d9edf7;
}

/* Tip (gold) */

.admonition.tip::before {
        content: "💡";
        color: goldenrod;
        filter: sepia(50%) saturate(3) hue-rotate(-10deg);
}
.admonition.tip{
        border-color: #ffc107;
}
.admonition.tip .admonition-title {
        background-color: #ffecb3;
}

```

---

_[View the full topic](https://talk.commonmark.org/t/css-for-admonition-extension/3545)._