Back to Alert Banner-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, 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@14.1.0

Information

Vi minder dig om, at din selvrisiko ikke er blevet betalt. Du kan indbetale belΓΈbet via MobilePay eller via det girokort, vi har sendt dig. Du kan se bort fra denne besked, hvis du netop har betalt.

Click here to view details

Table of Contents

Edit this section, Opens in new window

Usage

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>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

Bug Fixes

  • πŸ› Do not force meta text styles for every element (f703c84)

chore

  • πŸ€– Rename util to utils (f78721f)

Code Refactoring

  • πŸ’‘ Rename scope and repository (3ea5423)
  • πŸ’‘ Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

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 from if-design-system to ids-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!

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.6.3 (2021-09-17)

Bug Fixes

13.1.0 (2021-08-30)

Features

12.13.1 (2021-08-11)

Bug Fixes

  • πŸ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

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)

Code Refactoring

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.33.0 (2020-09-28)

Bug Fixes

  • πŸ› Adjust positioning of icon in notifications (7771472)

6.22.0 (2020-07-01)

Bug Fixes

  • πŸ› Use correct notification colors (61d663b)

6.11.0 (2020-04-22)

Bug Fixes

  • πŸ› Add sr only text for footer logo link (2971dd9)

6.5.4 (2020-04-08)

Bug Fixes

13.1.0 (2021-08-30)

Features

12.13.1 (2021-08-11)

Bug Fixes

  • πŸ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

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)

Code Refactoring

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Notification is now renamed to Alert Banner

7.1.0 (2020-11-16)

Features

  • 🎸 Add support for auto generation of components index (9444600), closes #309650

6.33.0 (2020-09-28)

Bug Fixes

  • πŸ› Adjust positioning of icon in notifications (7771472)

6.22.0 (2020-07-01)

Bug Fixes

  • πŸ› Use correct notification colors (61d663b)

6.11.0 (2020-04-22)

Bug Fixes

  • πŸ› Add sr only text for footer logo link (2971dd9)

6.5.4 (2020-04-08)

Bug Fixes

5.0.1-alpha.164 (2020-03-13)

Features

  • 🎸 Add component tabs (3b6c11b)
  • 🎸 Add new component: Tabs (76646b1)

5.0.1-alpha.160 (2020-03-12)

Reverts

  • Revert "chore: lerna bootstrap" (006ac4a)

5.0.1-alpha.150 (2020-03-05)

Bug Fixes

  • πŸ› Adjusting components to baseline grid (5a53cd9)

5.0.1-alpha.147 (2020-03-02)

Bug Fixes

  • πŸ› Use correct versions (1866cff)

Features

  • 🎸 Add notification component (3b1a25e)
  • 🎸 Add responsive feature (760b0b7)
Edit this section, Opens in new window
Contact us, Opens in new window