diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 3c927cf5951a474dc88d70e60d0faa85445d148e..5bc36e7e68b98dee75ab0b52a6ad315a5893bcef 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -10,7 +10,7 @@ $utilities: map-merge( "align": ( property: vertical-align, class: align, - values: baseline top middle bottom text-bottom text-top + values: baseline sub top middle bottom text-bottom text-top ), // scss-docs-end utils-vertical-align // scss-docs-start utils-float diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 3ef2e62cf8bdf6c8366a2d2ac8fded80501f4c07..6ad20082410ef49ca4341f16372e1537ba22d86f 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -36,6 +36,24 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi {{< /alerts.inline >}} {{< /example >}} +### Icons + +Alerts can also contain icons use the [Flex]({{< docsref "/utilities/flex" >}}) utility classes to quickly add icons to your alert. + +{{< example >}} +<div class="alert alert-primary d-flex align-items-center" role="alert"> + <div class="flex-shrink-0"> + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-question-circle align-sub" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" /> + <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" /> + </svg> + </div> + <div class="flex-grow-1 ms-3"> + A simple primary alert with icon check it out! + </div> +</div> +{{< /example >}} + ### Additional content Alerts can also contain additional HTML elements like headings, paragraphs and dividers.