EvoToolkit - v3.2.1 (Changelog)

Cover

The cover object pattern makes an element fill up all available space until the first parent element with position:relative is hit.

Note: Some examples feature light grey backgrounds so it's easier to see what's going on. In the toolkit itself, these are transparent.

Source

Contributors

Luke Harrison

Table of contents

Base

Modifiers

Base

Cover
<div class='o-cover'>Cover</div>

Modifiers

A list of modifiers for the cover component, allowing you to change its appearance to fit a variety of roles and scenarios.

Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.

Right

Makes the cover hug right, rather than the default left. You would use this typically when applying width utility classes to the element, as per the example.

Cover
<div class='o-cover o-cover--right u-width-6/12'>Cover</div>