Documentation

# Explanation of markup

  • Banner classes: .banner & .banner--optimized latter is used for mobile optimized images that have a different aspect ratio than the desktop images
  • Slideshow & slide reserved for the future in case the banner will be configured to a slideshow
  • .banner__wrap - necessary to allow the mobile action buttons to drop below the banner without affecting the display of caption positioning
  • .banner__content container that houses all the content, positioned absolutely to stretch the height of the .banner__wrap, which is dictated by .banner__picture. .banner__content also determines the horizontal positioning of the inner content the variable classes dicate that:
    • .banner__content--left
    • .banner__content--center
    • .banner__content--right
  • .banner__container column that houses content. There can be at most 2 .banner__containers in the .banner. .banner__contaners remain side by side on regular .banner, on .banner--optimized they stack, the second/right column goes on top and the left on the bottom. The vertical and horizontal positioning must be assigned via class variations:
    • .banner__container--top (also default)
    • .banner__container--middle
    • .banner__container--bottom
    • .banner__container--left (also default)
    • .banner__container--center
    • .banner__container--right
  • Width of the .banner__container is always 50% on desktop. On mobile container width is 100% if we have .banner--optimized or there is only 1 .banner__container. When there is more than 1 .banner__container & we are in a standard banner the width of each container is restricted to 50%.
  • .banner__caption necessary as it allows .banner__container to dictate the vertical positioning of the .banner__caption
  • .banner__action displays action buttons on desktop
  • .banner__action--mobile displayed action buttons below the image on mobile

Sample markup:

<section class="banner">
  <div class="banner__slideshow">
  <div class="banner__slide">
    <div class="banner__wrap">
    <picture class="banner__picture">
      <source media="(min-width: 1171px)" srcset="<?php print $largestImage;?> 1700w" sizes="100vw" />
      <source media="(min-width: 960px)" srcset="<?php print $largeImage;?> 1170w" sizes="100vw" />
      <source media="(min-width: 600px)" srcset="<?php print $mediumImage; ?> 750w" sizes="100vw" />
      <source srcset="<?php print $smallImage; ?> 320w" sizes="100vw" />
      <img alt="" src="<?php print $smallImage; ?>" class="banner__image"/>
    </picture>
    <div class="banner__content">
      <div class="banner__container">
      <div class="banner__caption">
        <h1 class="banner__heading"></h1>
        <div class="banner__action">
        </div><!-- /.banner__action -->
      </div><!-- /.banner__caption -->
      </div><!-- /.banner__container -->
    </div><!-- /.banner__content -->
    </div><!-- /.banner__wrap -->
    <div class="banner__action--mobile">
    </div><!-- /.banner__action-\-mobile -->
  </div><!-- /.banner__slide -->
  </div><!-- /.banner__slideshow -->
</section>

← Meta tags →