markups/warning-markup.svg

<svg fill="none" viewBox="0 0 800 100" width="800" height="100" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                .container {
                    border-radius: 2px;
                    padding: 16px 16px;
                    background-color: #FEEFB3;
                    border: 1px solid rgba(159,96,0,0.2);
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
                }

                .container svg {
                    width: 16px;
                    height: 16px;
                    vertical-align: text-top;
                }

                .container .message {
                    color: #9F6000;
                    font-size: 1.2rem;
                    margin-left: 1rem;
                }
            </style>
            <div class="container">
                <div class="header">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="512" fill="#9F6000" height="512">
                        <g id="Tombstone">
                            <path d="M26,22a2,2,0,0,0-2-2H22v4h2A2,2,0,0,0,26,22Z" />
                            <path d="M42,22a2,2,0,0,0-2-2H38v4h2A2,2,0,0,0,42,22Z" />
                            <path d="M14.794,57.2,8.032,60H55.968l-6.762-2.8A44.716,44.716,0,0,0,14.794,57.2Z" />
                            <path
                                d="M8,54.858A4,4,0,0,0,11,51V48a1,1,0,0,0-2,0v3a1.993,1.993,0,0,1-1,1.722V48a1,1,0,0,0-2,0v4.722A1.993,1.993,0,0,1,5,51V48a1,1,0,0,0-2,0v3a4,4,0,0,0,3,3.858v3.9l2-.828Z" />
                            <path
                                d="M56,54.858A4,4,0,0,1,53,51V48a1,1,0,0,1,2,0v3a1.993,1.993,0,0,0,1,1.722V48a1,1,0,0,1,2,0v4.722A1.993,1.993,0,0,0,59,51V48a1,1,0,0,1,2,0v3a4,4,0,0,1-3,3.858v3.9l-2-.828Z" />
                            <path
                                d="M15,54.98a46.641,46.641,0,0,1,34,0V21a17,17,0,0,0-34,0ZM40,42H24a1,1,0,0,1,0-2H40a1,1,0,0,1,0,2ZM36,19a1,1,0,0,1,1-1h3a4,4,0,0,1,0,8H38v5a1,1,0,0,1-2,0Zm-5,0a1,1,0,0,1,2,0V31a1,1,0,0,1-2,0ZM20,19a1,1,0,0,1,1-1h3a4,4,0,0,1,.813,7.916l3.019,4.529a1,1,0,0,1-1.664,1.11L22.465,26H22v5a1,1,0,0,1-2,0Zm1,17H43a1,1,0,0,1,0,2H21a1,1,0,0,1,0-2Z" />
                        </g>
                    </svg>
                    <span class="message">This is a warning message.</span>
                </div>
            </div>
        </div>
    </foreignObject>
</svg>