The block object just puts an image on top of some text content.
The basic markup will always be as follows:
<div class="block">
<img class="block__img" src="some-image.jpg">
<p class="block__body">Lorem ipsum dolor sit amet.</p>
</div>
.block
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, aut at fugiat inventore rem blanditiis omnis amet cupiditate, tempora, vero quae repellendus soluta aperiam voluptates atque laborum nemo eligendi ipsum sed. Voluptatem, maiores. Voluptatibus culpa totam molestias itaque recusandae, atque, eius ex modi. Fugiat, beatae.
<div class="block">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, aut at fugiat inventore rem blanditiis omnis amet cupiditate, tempora, vero quae repellendus soluta aperiam voluptates atque laborum nemo eligendi ipsum sed. Voluptatem, maiores. Voluptatibus culpa totam molestias itaque recusandae, atque, eius ex modi. Fugiat, beatae.</p>
</div>
.block--tiny
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis aliquid reiciendis, eos enim corporis est minus dolore, veritatis molestiae ad, consectetur dolorum aut provident magnam accusantium ipsam iure. Suscipit, cupiditate, corrupti. Laudantium recusandae sapiente delectus, autem voluptas labore rerum quibusdam ea ipsa qui aspernatur.
<div class=" block block--tiny ">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo blanditiis aliquid reiciendis, eos enim corporis est minus dolore, veritatis molestiae ad, consectetur dolorum aut provident magnam accusantium ipsam iure. Suscipit, cupiditate, corrupti. Laudantium recusandae sapiente delectus, autem voluptas labore rerum quibusdam ea ipsa qui aspernatur.</p>
</div>
.block--small
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptatibus deserunt aliquam, aspernatur dolor error quaerat ipsum, magnam ducimus sed vero odit totam reprehenderit eveniet quam nihil unde blanditiis repudiandae aut laboriosam ab distinctio et. Perspiciatis dicta, beatae dolorum ex corporis praesentium, similique nobis nemo?
<div class=" block block--small ">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptatibus deserunt aliquam, aspernatur dolor error quaerat ipsum, magnam ducimus sed vero odit totam reprehenderit eveniet quam nihil unde blanditiis repudiandae aut laboriosam ab distinctio et. Perspiciatis dicta, beatae dolorum ex corporis praesentium, similique nobis nemo?</p>
</div>
.block--large
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae, ratione dignissimos delectus incidunt reiciendis corporis maxime totam officia quia perferendis enim maiores, officiis! Assumenda labore ipsum maxime ea quos quae nostrum, quidem quod harum dolorum perferendis quia iste recusandae dolore vero consequatur fugit pariatur.
<div class=" block block--large ">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam molestiae, ratione dignissimos delectus incidunt reiciendis corporis maxime totam officia quia perferendis enim maiores, officiis! Assumenda labore ipsum maxime ea quos quae nostrum, quidem quod harum dolorum perferendis quia iste recusandae dolore vero consequatur fugit pariatur.</p>
</div>
.block--huge
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quae, explicabo excepturi placeat, inventore numquam suscipit quam ratione obcaecati voluptas veniam quis repellendus qui, voluptatibus rerum sequi ex vel, quo. Doloribus itaque provident maxime excepturi possimus in, et molestiae asperiores repudiandae quas? Saepe, fugiat, asperiores.
<div class=" block block--huge ">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quae, explicabo excepturi placeat, inventore numquam suscipit quam ratione obcaecati voluptas veniam quis repellendus qui, voluptatibus rerum sequi ex vel, quo. Doloribus itaque provident maxime excepturi possimus in, et molestiae asperiores repudiandae quas? Saepe, fugiat, asperiores.</p>
</div>
.block--flush
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit id nulla dolores magnam quis dolore commodi dolorum aperiam velit? Voluptatum provident sed doloremque quam, temporibus aut, officia recusandae sit, dolorem exercitationem, illo minima reiciendis voluptates nihil. Ipsam, consequuntur! Minima vel, dolorum error sed ut blanditiis!
<div class=" block block--flush ">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit id nulla dolores magnam quis dolore commodi dolorum aperiam velit? Voluptatum provident sed doloremque quam, temporibus aut, officia recusandae sit, dolorem exercitationem, illo minima reiciendis voluptates nihil. Ipsam, consequuntur! Minima vel, dolorum error sed ut blanditiis!</p>
</div>
.block--center
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor explicabo vero, delectus alias voluptate fuga, obcaecati officiis vitae velit praesentium blanditiis? Officia enim alias recusandae accusantium perspiciatis blanditiis nulla explicabo ab quos velit, debitis amet doloribus eaque, atque ipsum nobis nihil molestiae! Sint, amet.
<div class=" block block--center ">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolor explicabo vero, delectus alias voluptate fuga, obcaecati officiis vitae velit praesentium blanditiis? Officia enim alias recusandae accusantium perspiciatis blanditiis nulla explicabo ab quos velit, debitis amet doloribus eaque, atque ipsum nobis nihil molestiae! Sint, amet.</p>
</div>
.block--right
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit fugiat ipsum dicta quod iusto vel. Maiores velit veritatis similique repellat, dolores facilis eum ex aut ullam assumenda earum maxime obcaecati nulla perspiciatis commodi atque, odio! Libero obcaecati atque nam ex, dolore sed repudiandae, tempore.
<div class=" block block--right ">
<img src="http://placehold.it/200x150/dddddd/4a8ec2" class="block__img" />
<p class="block__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit fugiat ipsum dicta quod iusto vel. Maiores velit veritatis similique repellat, dolores facilis eum ex aut ullam assumenda earum maxime obcaecati nulla perspiciatis commodi atque, odio! Libero obcaecati atque nam ex, dolore sed repudiandae, tempore.</p>
</div>
The block object provides the following modifiers:
block--tiny
block--small
block--large
block--huge
block--rev
block--flush
block--center
block--right
.block--tiny, .block--small, .block--large,
.block--huge all vary the spacing between .block__img and
.block__body. Each one has its own dedicated variable to control that spacing:
$inuit-block-gutter--tiny: quarter($inuit-block-gutter) !default;
$inuit-block-gutter--small: halve($inuit-block-gutter) !default;
$inuit-block-gutter--large: double($inuit-block-gutter) !default;
$inuit-block-gutter--huge: quadruple($inuit-block-gutter) !default;
.block--flush will eliminate this spacing completely.
If the image, as well as the content should be aligned centered, the .block--center modifier is provided, as well as a .block--right modifier which alignes the image and the content to the right.
Of course you can combine several modifiers like:
<div class="block block--large block--right">
...
</div>
You can alter the gap between .block__imgand .block__body with the $inuit-block-gutter variable:
$inuit-block-gutter: $inuit-base-spacing-unit*2;