dxw style

Phase banner 

<div class="grid-container">
    <div class="column-full">
        <div class="phase-banner">
            <strong class="phase-tag phase-tag-alpha">ALPHA</strong>
            <span>This is a new service – your
        <a href="#">feedback</a>
        will help us to improve it.</span>
        </div>
    </div>
</div>
 
<div class="grid-container">
  <div class="column-full">
    <div class="phase-banner">
      <strong class="phase-tag phase-tag-{{modifier}}">{{phaseText}}</strong>
      <span>This is a new service – your
        <a href="{{feedbackLink}}">feedback</a>
        will help us to improve it.</span>
    </div>
  </div>
</div>
 
{
  "modifier": "alpha",
  "phaseText": "ALPHA",
  "feedbackLink": "#"
}
  • Content: 
    .phase-banner {
  @include clearfix;
  display: block;
  padding: $medium-spacing $medium-spacing $medium-spacing 0;
  border-bottom: 1px solid $grey-2;
  .phase-tag {
    padding: 3px 6px;
    margin-right: 5px;
    color: $white;
  }
  .phase-tag-alpha {
    background-color: $sbc-orange;
  }
  .phase-tag-beta {
    background-color: $sbc-purple;
  }
}
  • URL: /components/raw/phase-banner/phase-banner.scss
  • Filesystem Path: components/phase-banner/phase-banner.scss
  • Size: 357 Bytes

There are no notes for this item.