# Stripe

WIP

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- Content:
  `

      .stripe {
        overflow: hidden;
        width: 100%;
      }

      .stripe--primary {
        background-color: $brand-primary;
      }

      .stripe--secondary {
        background-color: $brand-secondary;
      }

      .stripe--white {
        background-color: $brand-white;
      }

      .stripe--bg-image {
        background-color: rgba($brand-secondary, 0.5);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }

      .stripe--gray {
        background-color: $brand-gray-10;
      }

      .stripe--black {
        background-color: $brand-gray;
      }

      .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: 597 Bytes

- Handle: @stripe
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/02-layouts/component-layouts/stripe/stripe.html

No notes defined.