Government of British ColumbiaGovernment of British Columbia

DevHub

beta
Resource Information

Status

Last Updated: February 22, 2019

Beta Status

The beta status indicator tells users that the product is still being worked on.

Example

Use This For:

  • Indicating your service is still being worked on and things may change.

Don't Use This when:

  • Your service is live and is no longer being actively worked on.

Rationale

  • The beta text has no border so users don't confuse the status for a button
  • The text is visually distinct from the service name

Discuss this design on the Beta Status Github Issue

Behaviour

  1. Additional research is being done for users to interact or understand the meaning of Beta.

Accessibility

This component has been built according to WCAG 2.0 AA standards and all government services should strive to meet this level. This component successfully includes the following accessibility features:

Screen readers

(coming soon)

Colour Contrast

  • Gold text exceeds a 7:1 contrast ratio on the header blue background

Code

HTML

<!--
  All in-line CSS is specific to this sample; it can and should be ignored.
 -->
  <header>
    <div class="banner">
        <a href="https://gov.bc.ca" alt="British Columbia">
          <img src="../assets/images/logo-banner.svg" alt="Go to the Government of British Columbia website" />
        </a>
        <h1>Hello British Columbia</h1>
        <div aria-label="This application is currently in Beta phase" class=Beta-PhaseBanner>
          Beta
        </div>
    </div>
    <div class="other">
    <!-- 
      This place is for anything that needs to be right aligned
      beside the logo.  
    -->
      &nbsp;
    </div>
    </div>
  </header>

CSS

header {
  background-color: #036;
  border-bottom: 2px solid #fcba19;
  padding: 0 65px 0 65px;
  color: #fff;
  display: flex;
  height: 65px;
  top: 0px;
  position: fixed;
  width: 100%;
}

header h1 {
  font-family: ‘Noto Sans’, Verdana, Arial, sans-serif;
  font-weight: normal;  /* 400 */
  margin: 5px 5px 0 18px;
  visibility: hidden;
}

header .banner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 10px 0 0;
  /* border-style: dotted;
  border-width: 1px;
  border-color: lightgrey; */
}

header .other {
  display: flex;
  flex-grow: 1;
  /* border-style: dotted;
  border-width: 1px;
  border-color: lightgrey; */
}

.Beta-PhaseBanner {
  color: #fcba19;
  margin-top: -1em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
}

:focus {
    outline: 4px solid #3B99FC;
    outline-offset: 1px;
  }

/*
  These are sample media queries only. Media queries are quite subjective
  but, in general, should be made for the three different classes of screen
  size: phone, tablet, full. 
*/

@media screen and (min-width: 600px) and (max-width: 899px) {
  header h1 {
    font-size: calc(7px + 2.2vw);
    visibility: visible;
  }
}

@media screen and (min-width: 900px) {
  header h1 {
    font-size: 2.0em;
    visibility: visible;
  }
}