Helsingborg Style Guide

Stripe

The iconic Helsingborg brand stripe.
ATTENTION: Do not use the gray stripe, it's only for demonstration purpose. The default behaviour of the stripe is to inherit color from the currently active color theme.

Modifiers

.stripe-red - Red stripe
.stripe-blue - Blue stripe
.stripe-green - Green stripe
.stripe-pruple - Purple stripe

Example

<div class="stripe">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="stripe stripe-red">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="stripe stripe-blue">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="stripe stripe-green">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="stripe stripe-purple">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Source file: ~/source/sass/component/stripe/stripe.scss

View source on GitHub