Block
The Block object simply stacks an image on top of some text content.
This incredibly frequently occurring design pattern is now wrapped up in a simple, reusable, configurable abstraction.
Install using npm:
$ npm install --save-dev aleut.objects.block
Usage
Basic usage of the Block object uses the required classes:
Text-like content goes here.
The only valid children of the .o-block
node are .o-block__img
and
.o-block__body
.
Options
Other, optional classes can supplement the required base classes:
.o-block--flush
: remove the space between the stacked image- and text-content..o-block--[tiny|small|large|huge]
: alter the spacing between the stacked image- and text-content..o-block--[center|right]
: align both the image- and text-content.
For example:
Text-like content goes here.
Enable options
To enable the optional classes set the variables to true
before you import
the _objects.block.scss
-file.
;;;;;;;
Dependencies
The Block object depends on two other aleutcss modules:
If you install the Block object using NPM, you will get these dependencies at
the same time. If not using NPM, please be sure to install and @import
these
dependencies in the relevant way.