Styleguide

Flag

DRY's up 1 by 11 layout__items. Generally used for Image + Content.

Default

Mouse over these & see how the opposite block stays in the middle 
.flag
  .flag__object
    .library-tile.library-tile--grow-on-hover
  .flag__body
    .library-tile.library-tile--grow-on-hover
      Mouse over these  see how the opposite block stays in the middle

<div class='flag'>
  <div class='flag__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='flag__body'>
    <div class='library-tile library-tile--grow-on-hover'>
      Mouse over these & see how the opposite block stays in the middle
    </div>
  </div>
</div>

Flush

no gutters allowed 
.flag.flag--flush
  .flag__object
    .library-tile.library-tile--grow-on-hover
  .flag__body
    .library-tile.library-tile--grow-on-hover
      no gutters allowed

<div class='flag flag--flush'>
  <div class='flag__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='flag__body'>
    <div class='library-tile library-tile--grow-on-hover'>
      no gutters allowed
    </div>
  </div>
</div>

Small

.flag.flag--small
  .flag__object
    .library-tile.library-tile--grow-on-hover
  .flag__body
    .library-tile.library-tile--grow-on-hover

<div class='flag flag--small'>
  <div class='flag__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='flag__body'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
</div>

Large

.flag.flag--large
  .flag__object
    .library-tile.library-tile--grow-on-hover
  .flag__body
    .library-tile.library-tile--grow-on-hover

<div class='flag flag--large'>
  <div class='flag__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='flag__body'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
</div>

Reverse

because its great to swap things up in succession
It's backwards! 
.flag.flag--rev
  .flag__object
    .library-tile.library-tile--grow-on-hover
  .flag__body
    .library-tile.library-tile--grow-on-hover
      It's backwards!

<div class='flag flag--rev'>
  <div class='flag__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='flag__body'>
    <div class='library-tile library-tile--grow-on-hover'>
      It's backwards!
    </div>
  </div>
</div>