Penguin

Banner

A banner show an image or group of them.

##simple banner

<section class="banner">
    <h1 class="invisible">Banner title</h1>
    <p class="banner__content">
        <a class="banner__content__link" href="url">
            <img src="url" alt="Alternative text">
        </a>
    </p>
</section>

##banners group

<section class="banner">
    <h1 class="invisible">Banners</h1>
    <ul class="banner__content">
        <li class="banner__content__item">
            <a class="banner__content__link" href="#">
                <img src="url" alt="Alternative text">
            </a>
        </li>
        <li class="banner__content__item">
            <a class="banner__content__link" href="#">
                <img src="url" alt="Alternative text">
            </a>
        </li>
        <li class="banner__content__item">
            <a class="banner__content__link" href="#">
                <img src="url" alt="Alternative text">
            </a>
        </li>
        <li class="banner__content__item">
            <a class="banner__content__link" href="#">
                <img src="url" alt="Alternative text">
            </a>
        </li>
        <li class="banner__content__item">
            <a class="banner__content__link" href="#">
                <img src="url" alt="Alternative text">
            </a>
        </li>
    </ul>
</section>

##responsive

You can get more info about $slicer-breakpoints and $slicer-breakpoint-names in grid components section.

// Breakpoints
$slicer-breakpoints       : 0   400px   600px   800px   1050px;
$slicer-breakpoint-names  :  'a'     'b'     'c'     'd'      'e';

To use this component in a responsive project you have different options:

Breakpoint-slicer:

.banner {
    // Common styles

    @include to(c) {
        @include banner--stacked;
    }

}

Default media query:

.banner {
    //Common styles

    @media (max-width: 799px) {
        @include banner--stacked;
    }

}

@include media-minwidth, a penguin mixin:

.banner {
    @include banner--stacked;

    @include media-minwidth('d')
    	// Custom styles
    }
}

##custom banner

You can create your own custom banner.

.banner--custom {
    @include banner--stacked;
    // Custom styles
}