Banner

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/banner@2.0.0

Variants#


Error#
Contribution

Purchase Soon
Trial expires in 2 days
<div class="spectrum-Banner spectrum-Banner--error">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Trial expires in 2 days</div>
</div>
Show markup

Info#
Contribution

Most Popular
Includes Illustrator CC
<div class="spectrum-Banner spectrum-Banner--info">
  <div class="spectrum-Banner-header">Most Popular</div>
  <div class="spectrum-Banner-content">Includes Illustrator CC</div>
</div>
Show markup

Warning#
Contribution

Purchase Soon
Your trial is about to expire
<div class="spectrum-Banner spectrum-Banner--warning">
  <div class="spectrum-Banner-header">Purchase Soon</div>
  <div class="spectrum-Banner-content">Your trial is about to expire</div>
</div>
Show markup

Corner Placement#
Contribution

The Spectrum banner 'corner placement'

Most Popular
Includes Illustrator CC
<div style="width: 255px; height: 325px; background-color: #ccc; position: relative;">
  <div class="spectrum-Banner spectrum-Banner--info spectrum-Banner--corner">
    <div class="spectrum-Banner-header">Most Popular</div>
    <div class="spectrum-Banner-content">Includes Illustrator CC</div>
  </div>
</div>
Show markup