Block

Stacked image-with-text object. A simple abstraction to cover a very commonly occurring design pattern.

Where is it?

The Block object is located in 5-Objects/_objects.block.scss.

Elements

The Block Object has 2 elements:

o-block__img
o-block__body

Usage

<div class="o-block">
  <div class="o-block__img">
    <img src="http://unsplash.it/100" alt="Placeholder image" />
  </div>
  <div class="o-block__body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam,
    reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis
    quasi praesentium ab vel at repellat amet atque?
  </div>
</div>

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

Size modifiers

Use the size modifiers to adapt the gap between the elements.

Class	Elements' gap
o-block--flush	`0`
o-block--tiny	`$global-spacing-unit-tiny`
o-block--small	`$global-spacing-unit-small`
o-block--large	`$global-spacing-unit-large`
o-block--huge	`$global-spacing-unit-huge`

Usage

`.o-block--flush`

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

`.o-block--tiny`

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

`.o-block--small`

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

`.o-block--large`

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

`.o-block--huge`

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

Alignment modifiers

Use alignment modifiers to change the elements' alignment.

Class	Alignment
o-block--left	left
o-block--right	right

Usage

`.o-block--left`

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

`.o-block--right`

Placeholder image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, reiciendis fugiat ut voluptate fugit quisquam modi maiores, perspiciatis quasi praesentium ab vel at repellat amet atque?

← Colors Cover →