<div class="demo">
    <div class="stripe stripe--primary" style="height: 20rem;">
        <h1>Full width colored bg Primary Color</h1>
    </div>
    <div class="stripe stripe--secondary" style="height: 20rem;">
        <h1 style="color:white;">Full width colored bg Secondary Color</h1>
    </div>
    <div class="stripe stripe--gray" style="height: 20rem;">
        <h1>Full width colored bg Gray Color</h1>
    </div>
    <div class="stripe stripe--gradient" style="height: 20rem;">
        <h1>Full width colored bg Gradient 1</h1>
    </div>
    <div class="stripe stripe--gradient-2" style="height: 20rem;">
        <h1>Full width colored bg Gradient 2</h1>
    </div>
    <div class="stripe stripe--bg-image bg-image-edition-11" style="height: 20rem;">
        <h1 style="color: white;">Full width with bg image</h1>
    </div>
</div>
<div class="demo">
    <div class="stripe stripe--primary" style="height: 20rem;">
        <h1>Full width colored bg Primary Color</h1>
    </div>
    <div class="stripe stripe--secondary"style="height: 20rem;">
        <h1 style="color:white;">Full width colored bg Secondary Color</h1>
    </div>
    <div class="stripe stripe--gray" style="height: 20rem;">
        <h1>Full width colored bg Gray Color</h1>
    </div>
    <div class="stripe stripe--gradient" style="height: 20rem;">
        <h1>Full width colored bg Gradient 1</h1>
    </div>
    <div class="stripe stripe--gradient-2" style="height: 20rem;">
        <h1>Full width colored bg Gradient 2</h1>
    </div>
    <div class="stripe stripe--bg-image bg-image-edition-11" style="height: 20rem;">
        <h1 style="color: white;">Full width with bg image</h1>
    </div>
</div>
/* No context defined. */
  • Content:
    .stripe {
      overflow: hidden;
      width: 100%;
    }
    
    .stripe--primary {
      background-color: $brand-primary;
    }
    
    .stripe--secondary {
      background-color: $brand-secondary;
    }
    
    .stripe--bg-image {
      background-color: rgba($brand-secondary, 0.5);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .stripe--gray {
      background-color: $brand-gray-10;
    }
    
    .stripe--gradient {
      background: $gradient;
    }
    
    .stripe--gradient-2 {
      background: $gradient-2;
    }
    
  • URL: /components/raw/stripe/_stripe.scss
  • Filesystem Path: components/02-layouts/component-layouts/stripe/_stripe.scss
  • Size: 490 Bytes

No notes defined.