Flag

To use this module, follow the instructions in the README. (For background on PXd, read the Getting Started documentation.)

px-flag-design

How to Use

Install via command line:


          bower install --save https://github.com/PredixDev/px-flag-design.git

Add to component Sass file:


          @import "px-flag-design/_objects.flag.scss";

Flag with tiny gutters

Sass Flag


          $inuit-enable-flag--tiny : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--tiny">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Placeholder — Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Flag with small gutters

Sass Flag


          $inuit-enable-flag--small : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--small">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with regular gutters


          <figure class=flag>
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with large gutters

Sass Flag


          $inuit-enable-flag--large : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--large">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with huge gutters

Sass Flag


          $inuit-enable-flag--huge : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--huge">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with no gutters

Sass Flag


          $inuit-enable-flag--flush : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--flush">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with top aligned content

Sass Flag


          $inuit-enable-flag--top : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--top">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with bottom aligned content

Sass Flag


          $inuit-enable-flag--bottom : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--bottom">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with reversed content

Sass Flag


          $inuit-enable-flag--rev : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--rev">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>

Flag with responsive content

Sass Flag


          $inuit-enable-flag--responsive : true;

Flag must be set before @import in component Sass file.

HTML


          <figure class="flag flag--responsive">
          

            <div class=flag__img>
          

              <img src=… alt=…>
          

            </div>
          

            <figcaption class=flag__body>
          

              …
          

            </figcaption>
          

          </figure>