Flops Disruption Bar

Link to article: Flops Disruption Bar.

Module Styles

•  a.disruptionHeader{
       display: inline-block;
       width: 100%;
       padding: .3em 0;
  
       color: hsl(0, 0%, 91.5%);
  
       font-size: 145%;
       line-height: 1;
       text-align: center;
       text-decoration: none;
       text-shadow:
            .5px    .9px  0 hsla(0, 0%, 0%, .3),
          1.5px   2.6px  0 hsla(0, 0%, 0%, .3);
       text-transform: uppercase;
       transition: color .15s linear;
  }
  
   a.disruptionHeader:hover{
       color: white;
       background-color: transparent;
       text-decoration: none;
  }

•  a.disruptionHeader{
       display: inline-block;
       width: 100%;
       padding: .3em 0;
  
       color: hsl(0, 0%, 91.5%);
  
       font-size: 145%;
       text-align: center;
       text-decoration: none;
       text-shadow:
            .5px    .9px  0 hsla(0, 0%, 0%, .3),
          1.5px   2.6px  0 hsla(0, 0%, 0%, .3);
       text-transform: uppercase;
       transition: color .15s linear;
  }
  
   a.disruptionHeader:hover{
       color: white;
       background-color: transparent;
       text-decoration: none;
  }

Inline Styles

• background-color: {$disruption-bg-color};

• font-weight: 900;

• background-color: {$disruption-bg-color};

• font-weight: 900;

Includes

• (none)

CSS Classes

• disruptionHeader

• disruptionHeader

Page Source

[[iftags -component]]
[[module CSS]]
 a.disruptionHeader{
     display: inline-block;
     width: 100%;
     padding: .3em 0;

     color: hsl(0, 0%, 91.5%);

     font-size: 145%;
     line-height: 1;
     text-align: center;
     text-decoration: none;
     text-shadow:
          .5px    .9px  0 hsla(0, 0%, 0%, .3),
        1.5px   2.6px  0 hsla(0, 0%, 0%, .3);
     text-transform: uppercase;
     transition: color .15s linear;
}

 a.disruptionHeader:hover{
     color: white;
     background-color: transparent;
     text-decoration: none;
}
[[/module]]

[[a href="*/anomaly-classification-system-guide" class="disruptionHeader" style="background-color: {$disruption-bg-color};"]][[span style="font-weight: 900;"]]DISRUPTION CLASS:[[/span]]@@ @@{$disruption}[[/a]]
[[/iftags]]

[[iftags +component]]
[[code]]
[[module CSS]]
 a.disruptionHeader{
     display: inline-block;
     width: 100%;
     padding: .3em 0;

     color: hsl(0, 0%, 91.5%);

     font-size: 145%;
     text-align: center;
     text-decoration: none;
     text-shadow:
          .5px    .9px  0 hsla(0, 0%, 0%, .3),
        1.5px   2.6px  0 hsla(0, 0%, 0%, .3);
     text-transform: uppercase;
     transition: color .15s linear;
}

 a.disruptionHeader:hover{
     color: white;
     background-color: transparent;
     text-decoration: none;
}
[[/module]]

[[a href="*/anomaly-classification-system-guide" class="disruptionHeader" style="background-color: {$disruption-bg-color};"]][[span style="font-weight: 900;"]]DISRUPTION CLASS:[[/span]]@@ @@{$disruption}[[/a]]
[[/code]]
[[/iftags]]