Definition
The flag object is a design pattern similar to the media object, however it utilises `display: table[-cell];` to give us control over the vertical alignments of the text and image.
o-flag
Lorem ipsum dolor sit amet
<div class="o-flag">
<div class="o-flag__img"></div>
<div class="o-flag__body"></div>
</div>
Alignment modifiers
The flag alignment modifiers defines the vertical alignment for both img and body.
The object alignment by default is middle, but exist one modifier for each alignment (top, middle, bottom).
o-flag > o-flag--top
Lorem ipsum dolor sit amet
<div class="o-flag o-flag--top">
<div class="o-flag__img"></div>
<div class="o-flag__body"></div>
</div>
Reverse modifier
The flag reverse modifier inverts the horizontal direction of img and body.
o-flag > o-flag--reverse
Lorem ipsum dolor sit amet
<div class="o-flag o-flag--reverse">
<div class="o-flag__img"></div>
<div class="o-flag__body"></div>
</div>