The basic markup will always be as follows:

        <div class="flag">
            <div class="flag__img">
                <img src="some-image.jpg">
            </div>
            <p class="flag__body">Lorem ipsum dolor sit amet.</p>
        </div>
        

flag

    <div class="flag">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--tiny

    <div class=" flag  flag--tiny ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--small

    <div class=" flag  flag--small ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--large

    <div class=" flag  flag--large ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--huge

    <div class=" flag  flag--huge ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--flush

    <div class=" flag  flag--flush ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--rev

    <div class=" flag  flag--rev ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--top

    <div class=" flag  flag--top ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--bottom

    <div class=" flag  flag--bottom ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

---

flag--responsive

    <div class=" flag  flag--responsive ">
                    <div class="flag__img">
                        <img src="http://placehold.it/200x300/dddddd/4a8ec2">
                    </div>
                    <p class="flag__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nulla in, libero
                        eveniet unde itaque aut. Vitae velit non, eaque, ullam assumenda dolorem architecto tempore!</p>
                </div>
            

The flag object provides the following modifiers:

• .flag--tiny
• .flag--small
• .flag--large
• .flag--huge
• .flag--rev
• .flag--flush
• .flag--top
• .flag--bottom
• .flag--responsive

.flag--tiny, .flag--small, .flag--large, .flag--huge all vary the spacing between .flag__img and .flag__body. Each one has its own dedicated variable to control that spacing:

          $inuit-flag-gutter--tiny: quarter($inuit-flag-gutter) !default;
          $inuit-flag-gutter--small: halve($inuit-flag-gutter) !default;
          $inuit-flag-gutter--large: double($inuit-flag-gutter) !default;
          $inuit-flag-gutter--huge: quadruple($inuit-flag-gutter) !default;
          

.flag--flush will eliminate this spacing completely.

If you want the image to appear at the right side rather than on the left side, you don't need to touch the markup. Just assign the .flag--rev modifier to .flag.

If you do not want the .flag__img and .flag__body to be aligned vertically, the .flag--top and .flag--bottom modifiers are available.

If your project is responsive-based, you will likely run into the situation, where there isn't any horizontal space for .flag__img and .flag__body together anymore. You can assign the .flag--responsive modifier to let the .flag__body collapse beneath the image. You can also control, when it should collapse via:

          $inuit-flag-collapse-at:   720px !default;
          

Of course you can combine several modifiers like:

                  <div class="flag  flag--large  flag--rev  flag--bottom  flag--responsive">
              ...
          </div>
          

You can alter the gap between .flag__img and .flag__body with the $inuit-flag-gutter variable:

                $inuit-flag-gutter:    $inuit-base-spacing-unit*2;