sunweb

Block

object block

Definition


Stacked content object. A simple abstraction to cover a very commonly occurring design pattern. Header, body and footer elements are optional.

o-block
      <div class="o-block">
        <div class="o-block__header"></div>
        <div class="o-block__body"></div>
        <div class="o-block__footer"></div>
      </div>

Alignment modifiers


The block alignment modifiers defines the horizontal text alignment. The object alignment by default is center.
The object alignment by default is left, but exist one modifier for each alignment (left, center, right).

o-block > o-block--center
Header
Body
      <div class="o-block o-block--center">
        <div class="o-block__header"></div>
        <div class="o-block__body"></div>
        <div class="o-block__footer"></div>
      </div>

Stretch modifier


The stretch modifier uses flex properties to grow the body on the proper context. Using this modifier in some side by side objects allows to have all of the with the same height

o-block > o-block--stretch
Header
Body
      <div class="o-block o-block--stretch">
        <div class="o-block__header"></div>
        <div class="o-block__body"></div>
        <div class="o-block__footer"></div>
      </div>