Alerts

Version bar

This element represents that the project is in a development stage, also show the stage of the development.

Open this version bar example in a new tab
HTML
<div class="occlss-version-bar">
  <div class="occlss-wrapper occlss-version-bar__wraper"><!--START wrapper block-->
    <div class="occlss-layout occlss-layout--bleed"><!--START layout block-->
      <div class="occlss-layout__col occlss-layout__col--8 occlss-version-bar__left">
        <span class="occlss-version-bar__badge">BETA</span>
      </div>
      <div class="occlss-layout__col occlss-layout__col--4 occlss-version-bar__right">
        <a href="javascript:void(0);" class="occlss-version-bar__link">What is this?</a>
      </div>
    </div>
  </div>
</div>

When to use this component

The version bar should be used on any application that is in development, so that the user can see that the application may not behave as expected.

Changelog

1.0.0

  • Component added