Flag

The flag object module is an object similar in appearance to the media object, but which provides slightly more advanced functionality.

Dependencies

The flag object depends on two other modules:

• settings.defaults
• tools.functions

If you install the flag object using Bower or npm, you will get these dependencies at the same time. If not using Bower or npm, please be sure to install and @import these dependencies in the relevant way.

Installation

You can install the flag module via Bower, npm, or copy and paste.

Install using Bower:

$ bower install tree-flag --save

Once installed, @import into your project in its Objects layer:

@import "bower_components/tree-flag/object.flag";

Install using npm:

$ npm install tree-flag --save

Install via file download

The least recommended option for installation is to simply download _object.flag.scss into your project and @import it into your project in its Objects layer.

Usage

Basic usage of the flag object uses the required classes:

<div class="o-flag">
    <div class="o-flag__img">
        <img src="/path/to/image.png" alt="" />
    </div>
    <div class="o-flag__body">
        <p>Text-like content goes here.</p>
    </div>
</div>

The only valid children of the .o-flag node are .o-flag__img and .o-flag__body.

Options

Other, optional classes can supplement the required base classes:

• .o-flag--[tiny|small|large|huge]: alter the spacing between the image- and text-content.
• .o-flag--rev: reversed flag objects have their image-content to the right, and text-content to the left.
• .o-flag--flush: no space between image- and text-content.
• .o-flag--[top|bottom]: align object to top or bottom.
• .o-flag--responsive: a very basic responsive implementation of the flag object.

For example:

<div class="o-flag  o-flag--flush">
    <div class="o-flag__img">
        <img class="o-flag__img" src="/path/to/image.png" alt="" />
    </div>
    <div class="o-flag__body">
        <p>Text-like content goes here.<p>
    </div>
</div>

Credits

• inuitcss Powerful, Sass-based, OOCSS framework designed with scalability and performance in mind.