CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Alert Banners provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/alert-banner@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Required markup
<div class="if alert-banner [info|success|warning|error]">
...
</div>
With dismiss
<div class="if alert-banner success">
<button type="button" class="if close"><span class="if axe sr-only">Close</span></button>
...
</div>
Tokens
Name | Value | Is aliased in |
---|---|---|
ids-alert-banner-mix-blend-mode | multiply | |
ids-alert-banner-opacity | 0.5 | |
ids-alert-banner-color | rgb(51, 30, 17) | |
ids-alert-banner-border-radius | 0.375rem | |
ids-alert-banner-spacing-inset | 1.5rem | |
ids-alert-banner-spacing-stack-inner | 0.5rem | |
ids-alert-banner-spacing-stack-paragraph | 1rem | |
ids-alert-banner-spacing-stack-media-query-base | 2rem | |
ids-alert-banner-spacing-stack-media-query-md | 4rem | |
ids-alert-banner-background-color-default | rgb(151, 226, 247) | |
ids-alert-banner-background-color-info | rgb(151, 226, 247) | |
ids-alert-banner-background-color-success | rgb(181, 237, 232) | |
ids-alert-banner-background-color-warning | rgb(255, 224, 130) | |
ids-alert-banner-background-color-error | rgb(255, 201, 166) |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
14.28.0 (2022-08-22)
Bug Fixes
Documentation Updates
14.23.1 (2022-05-17)
Code Refactoring
- alert-banner: remove local generation of token documentation view in favor of MDX (3f8c9b5)
Documentation Updates
14.22.2 (2022-05-03)
Miscellaneous chores
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.13.0 (2022-04-06)
Bug Fixes
- ๐ Encode data-value in design token documentation (85737c6)
14.12.5 (2022-04-01)
Code Refactoring
- ๐ก Convert the last spacing vars needed (0bdf95c)
Miscellaneous chores
14.9.0 (2022-03-03)
Features
- ๐ธ Add CSS variables to alert-banner (f26b1a4)
Bug Fixes
-
๐ Use correct margin for mobile (fd3c947)
-
๐ Use CSS vars for opacity/blendmode and text color also (d9aa13e)
Miscellaneous chores
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
reinstall (afce1f2)
reinstall (67f3140)
14.2.6 (2022-01-11)
Code Refactoring
-
๐ก Adjust alert-banner, add new default banner-color (93d2243) , closes #498651
-
Set up dev server (1ecedd5)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
๐ก Change focus styles, remove whatinput (75fd31b) , closes #505205
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ BREAKING CHANGES
- ๐งจ The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- ๐งจ Util is now renamed to Utils
- ๐งจ We have now changed the navigation structure for the documentation site. Please update any saved links!
- ๐งจ Navigation structure has now changed. Please see release notes!
Bug Fixes
- ๐ Do not force meta text styles for every element (f703c84)
Documentation Updates
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Split out CSS documentation (da41736) , closes #467386
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
-
use highlight class instead of style (b500ac6)
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
- ๐ Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
13.1.0 (2021-08-30)
Features
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
-
๐ Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
๐ค Reinstall (e660696)
-
๐ค Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
-
๐ Manually set firstPublished and lastModified (e83af7d)
-
๐ We don't need lastModified (e458a12)
12.1.0 (2021-05-07)
Bug Fixes
- ๐ Adjust icon position in alert-banner (5a4d926)
12.0.0 (2021-05-05)
โ BREAKING CHANGES
- ๐งจ All of the mixins have now been renamed
- ๐งจ Notification is now renamed to Alert Banner
Code Refactoring
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
-
๐ก Rename Notification to Alert Banner (8b4e48d) , closes #336508
-
๐ค Reinstall (2c763ea)
rebuild (7edb430)