Back to Banner-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

The banner is used as a form of internal advertising for our products or for selling points.

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/banner@14.1.0

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Table of Contents

Edit this section, Opens in new window




<div class="if banner claims">
  <div class="if container">
    <span class="if title">Har du råkat ut för en skada eller olycka?</span>
    <a class="if standalone" href="/asdsd">Till skadeanmällan</a>


<div class="if banner splash">
  <div class="if content">
      class="if image"
    <div class="if description">
        Visste du att du har en massa fördelar via Liberoklubben?
        <a class="if standalone" href="/asd">Til Liberoklubben</a>


<div class="if banner share">
  <div class="if content">
    <ul class="if">
      <li class="if facebook"><a class="if" href="">Share on Facebook</a></li>
      <li class="if linkedin"><a class="if" href="">Share on LinkedIn</a></li>
      <li class="if twitter"><a class="if" href="">Share on Twitter</a></li>
Edit this section, Opens in new window


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)


  • 🤖 Rename util to utils (f78721f)

Code Refactoring

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


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


  • 🧨 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)


  • 🎸 Input field hot reload (eac76b7)

13.6.3 (2021-09-17)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Bug Fixes

Code Refactoring


  • 🎸 Rename and extract and update hero with no image to (384eb77), closes #336508


  • 🧨 All of the mixins have now been renamed
  • 🧨 Teasers are no more. It has been replaces with Lifestyle Navigational

Card, Text Navigational Card. Studio Teasers is gone, use Studio Navigational Card instead, which is based on the old Studio Crosslinks

  • 🧨 This extracts the Hero variation with no image into a separate, design

updated component named Header

  • 🧨 Footer is now renamed to Global Footer

6.25.0 (2020-07-07)


  • 🎸 Add new banner type, for social media sharing (2f85d50)

6.16.2 (2020-05-20)

Bug Fixes

  • 🐛 Adjust spacing for banner titles (76f7634)

6.16.1 (2020-05-20)

Bug Fixes

  • 🐛 Fix routing for dev server (295db6e)

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.2.0 (2020-03-17)


  • 🎸 Add component banner (073b392)
Edit this section, Opens in new window
Contact us, Opens in new window