alert.svg

alert.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="100%" height="0px"> <foreignObject width="100%" height="100%"> <div xmlns="http://www.w3.org/1999/xhtml" class="root"> <style> .container { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; position: relative; display: flex; flex-direction: row; align-items: center; color: #55687d; } .container::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 0.325rem; background-color: #79b8ff40; } .icon { font-size: 2em; margin: 0 0.4em 0 0.5em; transform: translateY(-0.06em); } .code { display: inline-block; font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; font-size: 0.85em; font-weight: 600; margin-bottom: -0.2em; padding-top: 0.1em; padding-bottom: 0.1em; padding-right: 0.4em; padding-left: 0.4em; border-radius: 0.2em; background: #79b8ff40; mix-blend-mode: difference; opacity: 0.9; transform: translateY(-0.06em); } .text { font-size: 1em; margin-right: 0.75em; line-height: 1.3; } .icon, .text { mix-blend-mode: exclusion; } @media (max-width: 768px) { .text { font-size: 0.9em; } .icon { font-size: 1.85em; margin-left: 0.5em; margin-right: 0.4em; } } @media (max-width: 544px) { .text { font-size: 0.8em; } .icon { font-size: 1.5em; margin-left: 0.5em; margin-right: 0.35em; } } @media (max-width: 350px) { .text { font-size: 0.8em; margin-left: 1em; } .icon { display: none; } } </style> <div class="container"> <span class="icon">🛈</span> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris!</p> </div> </div> </foreignObject> </svg>