The flag object
The flag
object module is an object similar in appearance to the media
object, but which provides slightly
more advanced functionality like vertical alignment. The flag-object is a bit more verbose than the media-object and based on display: table;
which at times can cause some trouble. Read Harry Roberts article on The Flag Object
Install using npm:
$ npm install --save-dev aleut.objects.flag
Usage
Basic usage of the flag-object uses the required classes:
Some text-like content here.
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--flush
: remove the space between the image and the text..o-flag--[tiny|small|large|huge]
: alter the spacing between image and the text..o-flag--rev
: Switches the direction of the image and the text..o-flag--[top|bottom]
: Specify the location of the image relative to the text. The default is centered..o-flag--responsive
: If the flag-object should break with image over the text on a breakpoint.
For example:
Some text-like content here.
Enable options
To enable the optional classes set the variables to true
before you import
the _objects.flag.scss
-file.
;;;;;;;;;
Modify options
To modify the breakpoint of .o-flag--responsive
you can change this variable and set it to your preferred option before you import the _objects.flag.scss
-file.
;