hugo-theme-zzo/assets/sass/components/_notice.scss

.notices {
    margin: 2rem 0;
    position: relative;
    border-radius: .125rem;
    color: #fff;
    padding: .3rem 0.5rem .3rem 2rem;
    font-size: 0.9rem;

    &:first-child {
        &::before {
            position: absolute;
            top: -28.5px;
            color: #fff;
            content: '💡';
            left: 10px;
        }

        &::after {
            position: absolute;
            top: -28.5px;
            color: #fff;
            left: 2rem;
        }
    }

    &.info {
        border-top: 30px solid #f1b37e;
        background: #fefaf5;
        color: rgba(150, 90, 38, 0.995) !important;
        font-family: $contents-font-stack;

        &:first-child::after {
            content: 'Info';
            font-family: $title-font;
        }
    }

    &.warning {
        border-top: 30px solid #d58181;
        background: #fbeded;
        color: rgba(132, 56, 56, 0.995) !important;
        font-family: $contents-font-stack;

        &:first-child::after {
            content: 'Warning';
            font-family: $title-font;
        }
    }

    &.note {
        border-top: 30px solid #6bb1e0;
        background: #e6f3fb;
        color: rgba(47, 103, 141, 0.995) !important;
        font-family: $contents-font-stack;

        &:first-child::after {
            content: 'Note';
            font-family: $title-font;
        }
    }

    &.tip {
        border-top: 30px solid #84c578;
        background: #e8f7e6;
        color: rgba(72, 125, 63, 0.995) !important;
        font-family: $contents-font-stack;

        &:first-child::after {
            content: 'Tip';
            font-family: $title-font;
        }
    }
}